如何在 Django 模板中包含图像文件？答案

【问题标题】：How do I include image files in Django templates?如何在 Django 模板中包含图像文件？
【发布时间】：2010-10-28 10:38:38
【问题描述】：

我是 Django 新手，我正在尝试通过我正在开发的一个名为“dubliners”的简单项目和一个名为“book”的应用程序来学习它。目录结构是这样的：

dubliners/book/  [includes models.py, views.py, etc.]
dubliners/templates/book/

我有一个 JPG 文件，需要显示在每个网页的页眉中。我应该在哪里存储文件？我应该使用哪个路径让标签使用模板显示它？我尝试了各种位置和路径，但到目前为止都没有任何效果。

...

感谢您在下面发布的答案。但是，我尝试了图像的相对路径和绝对路径，但仍然在网页中显示损坏的图像图标。例如，如果我的主目录中有一张图片并在我的模板中使用此标签：

<img src="/home/tony/london.jpg" />

图片不显示。但是，如果我将网页保存为静态 HTML 文件，则会显示图像，因此路径是正确的。也许 Django 自带的默认 Web 服务器只有在特定路径上才会显示图像？

【问题讨论】：

标签： python django django-templates

【解决方案1】：

在生产中，您只需将模板生成的 HTML 指向主机存储媒体文件的任何位置。所以你的模板将只有例如

<img src="../media/foo.png">

然后您只需确保该目录存在相关文件即可。

在开发过程中是一个不同的问题。 django 文档对其进行了简洁明了的解释，因此在此处链接并在此处输入会更有效，但基本上您将为站点媒体定义一个视图，其中包含指向磁盘位置的硬编码路径。

对here。

【讨论】：

最好使用而不是硬编码媒体的位置。
忽略前面的，我现在明白了 - 我阅读了关于提供您链接到的静态文件的页面。
为什么不只是我们其中 book 是对象的名称。这样您就不需要知道文件名，也不需要添加 {{ MEDIA_URL }}。

【解决方案2】：

你的

<img src="/home/tony/london.jpg" />

适用于从磁盘读取的 HTML 文件，因为它假定 URL 是file:///home/...。但是，对于从网络服务器提供的文件，URL 将变为：http://www.yourdomain.com/home/tony/london.jpg，这可能是无效的 URL，而不是您真正的意思。

关于如何提供静态文件以及放置静态文件的位置，请查看document。基本上，如果您使用 django 的开发服务器，您想向他展示您的媒体文件所在的位置，然后让您的 urls.py 为这些文件提供服务（例如，通过使用一些 /static/ url 前缀）。

将要求您在 urls.py 中添加类似内容：

(r'^site_media/(?P<path>.*)$', 'django.views.static.serve',
    {'document_root': '/path/to/media'}),

在生产环境中，您希望跳过此步骤并让您的 http 服务器（apache、lighttpd 等）提供静态文件。

【讨论】：

【解决方案3】：

试试这个，

settings.py

>

# typically, os.path.join(os.path.dirname(__file__), 'media')
MEDIA_ROOT = '<your_path>/media'
MEDIA_URL = '/media/'

urls.py

>

urlpatterns = patterns('',
               (r'^media/(?P<path>.*)$', 'django.views.static.serve',
                 {'document_root': settings.MEDIA_ROOT}),
              )

.html

<img src="{{ MEDIA_URL }}<sub-dir-under-media-if-any>/<image-name.ext>" />

警告

小心！使用Context() 将为{{MEDIA_URL}} 生成一个空值。您必须改用RequestContext()。

我希望这会有所帮助。

【讨论】：

非常感谢！最后，唯一真正帮助我的答案！
{'document_root': settings.MEDIA_ROOT}是什么，是提供给被调用函数的上下文吗？

【解决方案4】：

我花了整整两天的时间来解决这个问题，所以我只是想我也会分享我的解决方案。截至 26/11/10，当前分支为 1.2.X，这意味着您必须在 settings.py 中包含以下内容：

MEDIA_ROOT = "<path_to_files>" (i.e. /home/project/django/app/templates/static)
MEDIA_URL = "http://localhost:8000/static/"

*（请记住，MEDIA_ROOT 是文件所在的位置，MEDIA_URL 是您在模板中使用的常量。）*

然后在 url.py 中放置以下内容：

import settings

# stuff

(r'^static/(?P<path>.*)$', 'django.views.static.serve',{'document_root': settings.MEDIA_ROOT}),

然后在你的html中你可以使用：

<img src="{{ MEDIA_URL }}foo.jpg">

django 的工作方式（据我所知是：

在 html 文件中，它将 MEDIA_URL 替换为在 setting.py 中找到的 MEDIA_URL 路径
它在 url.py 中查找 MEDIA_URL 的任何匹配项，然后如果找到匹配项（如 r'^static/(?P.)$'* 与 相关http://localhost:8000/static/) 它在 MEDIA_ROOT 中搜索文件然后加载它

【讨论】：

【解决方案5】：

另一种方法：

MEDIA_ROOT = '/home/USER/Projects/REPO/src/PROJECT/APP/static/media/'
MEDIA_URL = '/static/media/'

这需要您将媒体文件夹移动到静态文件夹的子目录。

然后在你的模板中你可以使用：

<img class="scale-with-grid" src="{{object.photo.url}}"/>

【讨论】：

【解决方案6】：

我明白，您的问题是关于存储在 MEDIA_ROOT 中的文件，但有时当您不打算再创建该类型的内容时，可以将内容存储为静态。
这可能是一种罕见的情况，但无论如何 - 如果您的网站有大量“当天的图片” - 并且所有这些文件都在您的硬盘上？

在这种情况下，我认为在 STATIC 中存储此类内容没有任何矛盾。
一切都变得非常简单：

静态

链接到保存在 STATIC_ROOT Django 中的静态文件附带一个静态模板标签。您可以使用它，无论是否你是否在使用 RequestContext。

{% load static %} <img src="{% static "images/hi.jpg" %}" alt="Hi!" />

复制自Official django 1.4 documentation / Built-in template tags and filters

【讨论】：

【解决方案7】：

我尝试了各种方法都不起作用。但这有效。希望它也对你有用。文件/目录必须位于以下位置：

项目/您的应用程序/模板项目/your_app/static

settings.py

>

import os    
PROJECT_DIR = os.path.realpath(os.path.dirname(_____file_____))
STATIC_ROOT = '/your_path/static/'

示例：

STATIC_ROOT = '/home/project_name/your_app/static/'    
STATIC_URL = '/static/'    
STATICFILES_DIRS =(     
PROJECT_DIR+'/static',    
##//don.t forget comma    
)
TEMPLATE_DIRS = (    
 PROJECT_DIR+'/templates/',    
)

proj/app/templates/filename.html

体内

{% load staticfiles %}

//for image

img src="{% static "fb.png" %}" alt="image here"

//note that fb.png is at /home/project/app/static/fb.png

如果 fb.png 在 /home/project/app/static/image/fb.png 中，那么

img src="{% static "images/fb.png" %}" alt="image here"

【讨论】：

【解决方案8】：

如果您的文件是模型中的模型字段，您还可以在模板标签中使用“.url”来获取图像。

例如。

如果这是你的模型：

class Foo(models.Model):
    foo = models.TextField()
    bar = models.FileField(upload_to="foo-pictures", blank = True)

在视图的上下文中传递模型。

return render (request, "whatever.html", {'foo':Foo.objects.get(pk = 1)})

在您的模板中，您可以：

<img src = "{{foo.bar.url}}">

【讨论】：

【解决方案9】：

Settings.py

>

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

urls.py

>

    urlpatterns += patterns('django.views.static',(r'^media/(?P<path>.*)','serve',{'document_root':settings.MEDIA_ROOT}), )

模板

<img src="{{MEDIA_URL}}/image.png" >

【讨论】：

【解决方案10】：

开发中
在您的应用程序文件夹中创建文件夹名称“静态”并将您的图片保存在该文件夹中。
使用图片使用：

<html>
    <head>
       {% load staticfiles %} <!-- Prepare django to load static files -->
    </head>
    <body>
        <img src={% static "image.jpg" %}>
    </body>
</html>

生产中：
一切都与开发相同，只需为 Django 添加更多参数：

添加 settings.py
STATIC_ROOT = os.path.join(BASE_DIR, "static/")（这将准备存储所有应用程序的静态文件的文件夹）
确保您的应用位于INSTALLED_APPS = ['myapp',]
在终端运行命令 python manage.py collectstatic（这会将静态文件从 INSTALLED_APPS 中包含的所有应用程序复制到全局静态文件夹 - STATIC_ROOT 文件夹）

这就是 Django 所需要的，在此之后，您需要进行一些 Web 服务器端设置，以获取使用静态文件夹的权限。例如。在 apache2 的配置文件 httpd.conf（适用于 windows）或 sites-enabled/000-default.conf.（在 linux 的站点虚拟主机部分下）添加： p>

别名 \static "path_to_your_project\static"

要求所有授予

仅此而已

【讨论】：

这是一个不完整的答案。要在模板中使用静态文件，settings.py 文件中的设置必须正确配置。 Read the docs
设置中的默认设置是使用静态文件夹来导入静态文件（STATIC_URL = '/static/'）
从Django 3开始，应该是{% load static %}。

【解决方案11】：

如果您在 django 项目中提供在线图像的地址，它将起作用。这对我有用。你应该拍一张。

【讨论】：

【解决方案12】：

还要检查问题可能不是由于路径，而是文件名或扩展名。虽然无法显示添加到 base.html 模板的图像，但发现错误与图像文件扩展名有关。如果您以 jpeg 格式存储图像，请使用 .jpg 作为 img 标签中的扩展名 <img src="{% static 'logo.jpg' %}" alt="Logo">.

【讨论】：