Question

我有一个我正在处理的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/文件夹中。

Answer 1

不熟悉django或您正在使用的网络服务器，但偶尔会有额外的内容，具体取决于您用来托管文件的内容。如果您在浏览器中放入127.0.0.1:8000/media/img/monitor.png它会加载您的图像吗？我怀疑它没有提供这些图像而不是HTML问题。

其中一个人可能会有所帮助：

Answer 2

您需要执行几个步骤。

您必须在模板文件的顶部插入{% 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')

第4步

<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" >

所以在您的静态文件夹中，您将拥有此结构 静态＆gt;媒体＆gt; img＆gt; tools.png

但我建议您删除媒体 静态＆gt; img＆gt; tools.png

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

媒体＆gt; tools.png

第5步

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

Answer 3

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

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

查看HTML代码时未显示图像

3 个答案: