繁体   English   中英

Heroku Django 图像未加载

[英]Heroku Django Images not loading

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

├────.idea

├────分析师

│ └─── 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%}

我认为这里发生了一些事情:

Static 与媒体文件

只是要清楚区别... Static 文件是您的代码库的一部分,包括 CSS 文件、JavaScript 文件和用于您网站设计的图像等内容。 只有当您进行一些开发工作时,它们才会发生变化。

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

由于您对媒体文件的控制较少,因此它们通常会受到不同的处理,因为安全风险略高,而且可能还有更多。

地方发展

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

  • 设置中的路径( STATIC_ROOTMEDIA_ROOT )与您的 static 和媒体目录的位置不匹配,或者
  • 您尝试指向模板中文件的方式存在错误。

那么,在本地开发过程中,static 和媒体文件都没有加载吗? 或者只是一个或另一个? 在浏览器中查看页面的源代码并查看那里的文件路径 - 它们是您所期望的吗?

Heroku

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

您使用白噪声是正确的,但这只会服务于您项目的 Static 文件。

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


除上述内容外,我目前在您的文件结构中看到的主要问题是article_picsmedia之外。 我假设您有一个带有image字段的 model( Article ?)? 也许您已将该字段的upload_to参数设置为article_pics 在这种情况下,该目录应该在media中。

当您添加新文章并上传图片时,在开发过程中,您可以在文件系统中看到它吗? 它在哪里 go?

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

├───analyst

├───blog

│ ├───migrations

│ ├───static

│ │ ├───blog

│ │ └───images

│ ├───templates

│ │ └───blog

└───media

└───article_pics

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

├───analyst

├───blog

│ ├───migrations

│ ├───static

│ │ ├───blog

│ │ └───images

│ ├───templates

│ │ └───blog

| └───media

| └───article_pics

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM