查看 HTML 代码时图像不显示答案

【问题标题】：Images not showing up when viewing HTML code查看 HTML 代码时图像不显示
【发布时间】：2017-04-25 19:14:19
【问题描述】：

我有一个我正在处理的 django 项目的索引页面，但是当我查看它时，我附加到按钮的图像没有显示出来。

<html>
    <head>
        <title>Support Tools</title>
        <style type="text/css">
        .button {
            float: left;
            margin-left: 30px;
            margin-bottom: 30px;
            width: 350px;
            height: 150px;
            background: url('/media/img/blank.png');
            background-repeat: no-repeat;
            cursor: hand;
        }
        .button img {
            position: relative;
            left: 20px;
            top: 10px;
        }
        .button div {
            font-family: Trebuchet MS, Calibri;
            color: white;
            font-weight: bold;
            font-size: 22pt;
            text-align: center;
            position: relative;
            top: -100px;
            left: 120px;
            width: 220px;
        }
        .title {
            font-family: Calibri, Helvetica, Arial, Verdana;
            font-size: 18pt;
            font-weight: bold;
        }
        a, a:link, a:visited, a:active, a:hover {
            text-decoration: none;
        }
        </style>
        <!--[if lte IE 6]>
        <script type="text/javascript" src="/media/js/supersleight-min.js"></script>
        <![endif]-->
    </head>
    <body id="b">
        <p class="title">GAI Support Tools</p>
        <a href="/eam/">
            <div class="button">
                <img src="/media/img/tools.png" />
                <div>EAM<br />Support Tool</div>
            </div>
        </a>            
        <a href="/admin/minisar/">
            <div class="button">
                <img src="/media/img/database.png" />
                <div>miniSAR<br />Administration</div>
            </div>
        </a>            
        <a href="/ai_stats/">
            <div class="button">
                <img src="/media/img/chart.png" />
                <div>Web Service<br />Dashboard</div>
            </div>
        </a>            
        <a href="/health/production/">
            <div class="button">
                <img src="/media/img/monitor.png" />
                <div>&nbsp;Web Service<br />Health</div>
            </div>
        </a>            
        <a href="/toys/user/">
            <div class="button">
                <img src="/media/img/users.png" />
                <div>User<br />Search</div>
            </div>
        </a>            
        <a href="/toys/ud_data_extract/">
            <div class="button">
                <img src="/media/img/database.png" />
                <div>UD Data<br />Extract</div>
            </div>
        </a>            
        <a href="/solutions/">
            <div class="button">
                <img src="/media/img/solutions.png" />
                <div>Solution Matrix</div>
            </div>
        </a>            
        <a href="/directentry/">
            <div class="button">
                <img src="/media/img/dice.png" />
                <div style="text-align: left; padding-left: 2.5em;"><u>DI</u>rect<br /><u>C</u>XML<br /><u>E</u>ntry</div>
            </div>
        </a>            
        <script type="text/javascript">
        supersleight.limitTo("b");
        supersleight.init();
        </script>
    </body>
</html>

它只是显示为损坏的图像链接，但所有 .png 文件都在 /media/img/ 文件夹中。

【问题讨论】：

标签： html django

【解决方案1】：

您需要几个步骤。

您必须在模板文件的顶部插入{% load static %}
您必须在应用程序的根目录上创建一个名为 static 和 media 的文件夹
在您的project/settings.py 文件中，您需要告诉 django 在哪里查找您的静态文件
您必须在模板中添加一个静态调用（参见第 4 步）
修改你的项目 urls.py

mytemplate.html ...（步骤 1）示例

{% load static %}
<!doctype html>
<html lang="en" class="no-js">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

settings.py（第 3 步）

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join('staticfiles')

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

第四步

<img src="{% static 'media/img/tools.png' %}" alt="image of ..." class="img-responsive img-rounded" > 
or if the image come from a Model object
<img src="{{object.image}}" alt="image of {{object.description}}" class="img-responsive img-rounded" >

所以在您的静态文件夹中，您将拥有这种结构 静态 > 媒体 > img > tools.png

但我建议您删除媒体 静态 > img > tools.png

如果您的图像来自模型对象，那么 Django 会自动查看文件夹媒体

媒体 > 工具.png

第 5 步

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

【讨论】：

谢谢。一旦我可以让 manage.py 服务器运行，我会试一试。我非常确定这将解决问题。我们正在将此应用程序从一台服务器移动到另一台服务器，并在此过程中更新一些 python 包，因为我们不使用的那些不再可用。我们在使用过时的 Django 代码时遇到问题。将是一个艰苦的过程。

【解决方案2】：

不熟悉 django 或您正在使用的网络服务器，但根据您用于托管文件的内容，偶尔会有一些额外的事情发生在幕后。如果您将 127.0.0.1:8000/media/img/monitor.png 放在浏览器中，它会加载您的图像吗？我怀疑它没有提供这些图像，而不是 html 问题。

也许这些人中的某个人会有所帮助：

【讨论】：

【解决方案3】：

在 urls.py 中添加以下行并检查一次。

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

【讨论】：