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

74

我是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 
— 托尼
source

Answers:

44

在生产中，您只需要从模板生成的HTML指向主机存储媒体文件的位置即可。因此，您的模板将仅包含例如

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

然后，您只需确保该目录与相关文件一起存在。

在开发过程中是另一个问题。django的文档简洁明了地说明了它，以便在此处进行链接并在其中进行输入更为有效，但是基本上，您将为站点媒体定义一个视图，该视图具有硬编码的磁盘位置。

就在这里。

— 约瑟夫·阿萨德
source
32
使用<img src =“ {{MEDIA_URL}} foo.png />可能比使用硬编码媒体的位置
— 更好。– randlet
忽略之前的内容，我现在知道了-我阅读了有关提供链接到的静态文件的页面。
— 托尼，
为什么不只是我们<img src =“ {{book.image.url}}”>其中book是对象的名称。这样，您无需知道文件名，也无需添加{{MEDIA_URL}}。
— SudoKid
71

尝试这个，

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()。

我希望这个能帮上忙。

— 阿黛尔·安萨里（Adeel Ansari）
source
2
非常感谢！最后，唯一对我有帮助的答案！
— 雅克·博世
什么是{'document_root': settings.MEDIA_ROOT}，提供给被调用函数的上下文是？
— 2014年
18

我确实知道，您的问题与存储在MEDIA_ROOT中的文件有关，但是当您不打算再创建该类型的内容时，有时可以将内容静态存储。
也许这是一种罕见的情况，但是无论如何-如果您的站点上有大量的“每日图片”-而所有这些文件都在硬盘上？

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

静态的

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

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

从django 1.4官方文档复制/内置模板标签和过滤器

— 安德烈·贝利亚克（Andrey Belyak）
source
12

我花了整整两天的时间来解决这个问题，所以我以为也要分享我的解决方案。从2010年11月26日起，当前分支为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的工作方式（据我所知是：

  1. 在html文件中，它将MEDIA_URL替换为setting.py中的MEDIA_URL路径。
  2. 它看起来在url.py找到了MEDIA_URL任何比赛，然后如果发现匹配（如R“^静态/（P？ *涉及到）$”的http：//本地主机：8000 /静态/），它的搜索MEDIA_ROOT中的文件，然后加载它
— 罗伯特
source
10

开发中
在您的应用文件夹中，创建文件夹名称“ static”，并将图片保存在该文件夹中。
要使用图片，请使用：

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

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

  1. 添加settings.py
    STATIC_ROOT = os.path.join(BASE_DIR, "static/")（这将准备文件夹，其中将存储所有应用程序的静态文件）

  2. 确保您的应用程序在 INSTALLED_APPS = ['myapp',]

  3. 在terminall运行命令python manage.py collectstatic中（这会将INSTALLED_APPS中包含的所有应用程序的静态文件复制到全局static文件夹-STATIC_ROOT文件夹中），

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

    别名\ static“ path_to_your_project \ static”

    需要所有被授予的

    ，仅此而已

— 火力
source
1
这是一个不完整的答案。要在模板中使用静态文件，settings.py必须正确配置文件中的设置。阅读文档
— Nrzonline
设置中的默认设置是使用静态文件夹导入静态文件（STATIC_URL ='/ static /'）
— FirePower
从Django 3开始，应该为{% load static %}。
— matheburg '20
9

如果文件是模型中的模型字段，则还可以在模板标记中使用“ .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}}">
— str
source
9

项目根目录下的/ media目录

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" >
— 奥马尔·吉尔格蒂（Omar Giorgetti）
source
5

您的 

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

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

有关如何服务以及将静态文件放置在何处的信息，请参阅本文档。基本上，如果您使用的是django的开发服务器，则想向他展示媒体文件的存放位置，然后urls.py提供这些文件的服务（例如，使用一些/static/url前缀）。

将要求您在您的计算机中放入以下内容urls.py：

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

在生产环境中，您想跳过此步骤并使HTTP服务器（apache，lighttpd等）提供静态文件。

— 肯德
source
3

另一种方法是：

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

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

然后，您可以在模板中使用：

<img class="scale-with-grid" src="{{object.photo.url}}"/>
— 斯蒂芬·坦纳
source
2

我尝试了各种方法都行不通，但这行得通，希望它对您也行。文件/目录必须位于以下位置：

projec / your_app / templates项目/ 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"
— 用户名
source
0

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

— 约翰·科林
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.