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

时间：2009-05-23 13:45:08

标签： python django django-templates

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

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

我有一个JPG文件需要显示在每个网页的标题中。我应该在哪里存储文件？我应该使用哪条路径让标签使用模板显示它？我尝试过各种各样的地点和路径，但到目前为止还没有任何工作。

...

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

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

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

12 个答案:

答案 0 :(得分：66)

试试这个，

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

我希望，这会有所帮助。

答案 1 :(得分：33)

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

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

然后你只需要确保目录中有相关文件。

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

右here。

答案 2 :(得分：17)

我明白，您的问题是关于存储在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

复制

答案 3 :(得分：11)

我花了两天时间研究这个问题，所以我想我也会分享我的解决方案。截至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'^ static /（？P。），则$'*与相关http：// localhost：8000 / static / ）它在MEDIA_ROOT中搜索文件，然后加载它

答案 4 :(得分：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" >

答案 5 :(得分：8)

正在开发中
在你的app文件夹中创建文件夹名称＆＃39; static＆＃39;并将图片保存在该文件夹中。
使用图片：

<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. 终端运行命令 python manage.py collectstatic 中的

  3. （这将使INSTALLED_APPS中包含的所有应用程序中的静态文件复制到全局静态文件夹 - STATIC_ROOT文件夹）
    这就是Django需要的所有内容，在此之后你需要进行一些Web服务器端设置来使用静态文件夹。例如。在apache2的配置文件 httpd.conf （对于windows）或 sites-enabled / 000-default.conf。（在linux的站点虚拟主机部分下）添加：

    Alias \ static＆＃34; path_to_your_project \ static＆＃34;

        要求全部授予

    那就是

答案 6 :(得分：6)

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

答案 7 :(得分：5)

你的

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

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

有关如何投放以及放置静态文件的位置，请查看此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 等）提供静态文件。

答案 8 :(得分：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}}"/>

答案 9 :(得分：2)

我尝试了各种方法它没有用。虽然这很有用。希望它也适合你。文件/目录必须位于以下位置：

工程中的/ your_app /模板 项目/ your_app /静态

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/',    
)

凸出/应用/模板/ 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"

答案 10 :(得分：0)

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

答案 11 :(得分：0)

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

相关问题
最新问题