Heroku Django 图像未加载

Question

一直在尝试解决这个问题几个小时，似乎无法绕过它。我安装了白噪声，除了图像未加载外，网站运行良好。以下是我的媒体代码：

├───.理念

├───分析师

│ └───pycache

├───博客

│ ├───迁移

│ │ └───pycache

│ ├───静态

│ │ ├───博客

│ │ └───图片

│ ├───模板

│ │ └───博客

│ └───pycache

└───媒体

└───article_pics

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL = '/static/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

主要网址：

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('blog.urls'))
]
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

主页模板：

{% extends "blog/base.html" %}
{% load static %}
{% load crispy_forms_tags %}
{%block content%}
<!-- Images Section -->
<div class="swiper-container" style="height:520px;">
<div class="swiper-wrapper">
<section class="swiper-slide about two">
<div class="container">
<div class="title title-dark">
<h2 class="title-heading">Analyze Everything</h2>
<img class="about-profile" src="{%static 'images/think.png'%}" alt="">
<p class="price"></p>
</div>
<div class="cta">
</div>
</div>
</section>
<section class="swiper-slide about two">
<div class="container">
<div class="title title-dark">
<h2 class="title-heading">Free Subscription</h2>
<h3 class="title-sub-heading">Read. Analyze. Learn.</h3>
</div>
<div class="cta">
<a href="#newsletter" class="btn btn-danger">Subscribe</a>
</div>
</div>
</section>

</div>
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>


</div>
<!-- End of Images Section -->
<!-- Latest Articles -->
<div class="container">
<hr><br>
<h1 class="text-center">Latest Articles</h1>
<!-- Row One of Articles -->
<div class="row">
{%for articles in articles%}
<div class="col-md-4 pt-4">
<div class="card h-100">
<img class="card-img-top" src="{{ articles.image.url }}" alt="Card image cap">
<div class="card-body">
<a href="{% url 'article-detail' articles.id%}" class="article-title">{{articles.title}}</a>
<hr>
<p class="card-text">{{articles.content|safe|slice:":80"}}...</p>
<a class="btn btn-sm btn-outline-primary" href="{% url 'article-detail' articles.id%}">Read More...</a>
</div>
</div>
</div>
{%endfor%}
</div>
<!-- End of Row One of Articles -->

<!-- Row Two of Articles -->
<div class="row ">
{% for articles_two in articles_two %}
<div class="col-md-4 pt-4">
<div class="card h-100">
<img class="card-img-top" src="{{ articles_two.image.url }}" alt="Card image cap">
<div class="card-body">
<a href="{% url 'article-detail' articles_two.id%}" class="article-title">{{articles_two.title}}</a><hr>
<p class="card-text">{{articles_two.content|safe|slice:":80"}}...</p>
<a class="btn btn-sm btn-outline-primary" href="{% url 'article-detail' articles_two.id%}">Read More...</a>
</div>
</div>
</div>
{% endfor %}
</div>
<!-- End of Row Two of Articles -->
<br>
<a style="float:right;" href="{%url 'articles' %}" class="btn btn-warning"> <i class="fas fa-angle-double-right"></i></a>
</div>
<!-- End of Latest Articles -->
<br><br><hr>
<section id="newsletter" class="newsletter">
<h1 class="text-center">Subscribe to The Analyst Now</h1>
<p class="text-center mb-3" style="color: grey;">Subscribe For Automatic Updates.</p>
<div class="text-center">
<form method="POST">
{% csrf_token %}
<fieldset class="form-group">{{form.as_p}}
<button class="btn btn-danger" type="submit">Subscribe</button>
</fieldset>
</form>
</div>
<br>
</section>

<!-- Javascript Tags -->
<script src="{% static 'blog/swiper.min.js' %}"></script>
<script>
var swiper = new Swiper('.swiper-container', {
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: '1',
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
coverflowEffect: {
stretch: 0,
depth: 100,
modifier: 1,
slideShadows : true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
},
});
</script>
{%endblock%}

Answer 1

我认为这里有一些事情发生：

静态文件与媒体文件

只是为了清楚区别...静态文件是代码库的一部分，包括用于网站设计的 CSS 文件、JavaScript 文件和图像等内容。它们只有在您执行某些开发工作时才会更改。

媒体文件是通过管理员或通过您制作的供用户使用的表单上传到您网站的文件，例如个人资料图片、书籍封面或博客文章中的图片。

由于您对媒体文件的控制较少，因此通常会以不同的方式对待它们，因为安全风险略高，而且很可能还有更多。

本地发展

在本地开发期间(当你使用./manage.py runserver时(，Django 的开发服务器应该可以毫无问题地提供静态和媒体文件。在本地工作时，不需要使用白噪声。如果静态和/或媒体文件未加载，则可能是因为：

• 设置中的路径(STATIC_ROOT、MEDIA_ROOT(与静态目录和媒体目录的位置不匹配，或者
• 您尝试指向模板中的文件的方式存在错误。

那么，在本地开发过程中，静态文件和媒体文件都没有加载吗？还是只是其中之一？在浏览器中查看页面的源代码并查看那里的文件路径 - 它们是您所期望的吗？

希罗库

Heroku 没有持久的文件系统，这意味着它无法提供媒体文件。因此，如果您或任何人通过网站上的表单上传新文件，虽然它最初可能会按预期加载，因为它已保存到磁盘，但很快文件本身就会消失并且不再加载到网站上。磁盘上唯一保留的文件是代码存储库中的文件。

使用白噪声是对的，但这只会为项目的静态文件提供服务。

要提供媒体文件，您需要使用 django 存储并将文件托管在其他地方(如 Amazon S3，或 django-storages 支持的其他服务(。这是一个真正的痛苦，令人讨厌的是，Heroku 没有在他们的文档中解释这一点。如果你谷歌，有设置它的指南(我以前用过这个;我不知道它是否仍然有效(。

---

除了上述之外，我目前看到您的文件结构的主要问题是article_pics不在media之内。我假设您有一个带有image字段的模型(Article？也许您已将字段的upload_to参数设置为article_pics？在这种情况下，该目录应位于media内。

当您添加新文章并上传图像时，在开发过程中，您可以在文件系统中看到它吗？它去哪儿了？

Answer 2

下面的媒体目录完全在项目之外。

├───analyst
├───blog
│ ├───migrations
│ ├───static
│ │ ├───blog
│ │ └───images
│ ├───templates
│ │ └───blog
└───media
└───article_pics

请尝试更新到以下内容并再次运行 collectstatic：

├───analyst
├───blog
│ ├───migrations
│ ├───static
│ │ ├───blog
│ │ └───images
│ ├───templates
│ │ └───blog
| └───media
| └───article_pics