无法使用 Django 显示静态文件夹中的图像答案

【问题标题】：Not able to display images from static folder using Django无法使用 Django 显示静态文件夹中的图像
【发布时间】：2020-06-21 05:39:52
【问题描述】：

这是我的家.html 我无法在 static/images/ 文件夹中显示图像。虽然 *[09/Mar/2020 15:52:09] "GET /static/images/mona.jpg HTTP/1.1" 404 1669 * 显示在终端中。


<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    {% block content %}
    {% load static %}
    <title>Home</title>
    <link rel="stylesheet" href={% static '/css/style.css' %} />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
</head>

<body>
    {% include "includes/header.html" %}

    <div class="pt-5">
        <div class="card d-inline-block">
            <img src={% static 'images/mona.jpeg' %} alt="Avatar" style="width:100%;">
            <div class="container">
                <h4><b>Mona Lisa</b></h4>
                <p><a href="#">Architect & Engineer</a></p>
            </div>
        </div>

        <div class="card d-inline-block">
            <img src={% static "images/mona.jpg" %} alt="Avatar" style="width:100%">
            <div class="container">
                <h4><b>The Scream</b></h4>
                <p><a href="#">Architect & Engineer</a></p>
            </div>
        </div>
    </div>

    {% include "includes/footer.html" %}
    {% endblock content %}
</body>

【问题讨论】：

你能分享从inspect元素创建的图像的url吗？
它在静态文件夹中，../static/images/mona.jpg
使用 'mona.jpg' 因为 mona.jpeg 不存在。

标签： python html css django bootstrap-4

【解决方案1】：

在源周围添加引号，如下所示

{% load static %}

<img src="{% static 'images/mona.jpeg' %}" alt="Avatar" style="width:100%;">

【讨论】：

【解决方案2】：

生产中的静态文件由网络服务器（apache、nginx）提供服务

在开发过程中，如果您使用 django.contrib.staticfiles 并且 DEBUG 设置为 True，则会自动提供 app_name/static/app_name 中的文件。

如果文件是由用户在您的网络应用中上传的，您需要编辑您的基本 urls.py 文件，如下所示

from django.conf.urls.static import static

urlpatterns = [
    # ... the rest of your URLconf goes here ...
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

For more info on this see  https://docs.djangoproject.com/en/3.0/howto/static-files/

【讨论】：

我已经进行了上述必要的更改，但仍然面临问题
你能把你的settings.py文件和目录结构贴出来吗？

【解决方案3】：

对不起，这是一个拼写错误。我真是太傻了……

在settings.py中

STATICFILES_DIRS = [
 os.path.join(BASE_DIR, 'the7thstreet/static'),
 '/var/www/static',
 ]

更正

STATICFILES_DIRS = [
 os.path.join(BASE_DIR, 'static'),
 '/var/www/static',
 ]

【讨论】：