• 当前位置：首页
  • IT科技
  • 如何在 Django 模板中包含图像文件？

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

2025-04-17 09:02:00
admin
原创
18
摘要：问题描述：我是 Django 新手，正在尝试通过一个简单的项目来学习它。我正在开发一个名为“都柏林人”的系统和一个名为“书籍”的应用程序。目录结构如下：dubliners/book/ [includes models.py, views.py, etc.] dubliners/templates/book/...

问题描述：

我是 Django 新手，正在尝试通过一个简单的项目来学习它。我正在开发一个名为“都柏林人”的系统和一个名为“书籍”的应用程序。目录结构如下：

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

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

感谢以下回复。但是，我尝试了图片的相对路径和绝对路径，网页上仍然显示损坏的图片图标。例如，如果我的主目录中有一张图片，并在模板中使用了这个标签：

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

图片不显示。但如果我将网页保存为静态 HTML 文件，图片就会显示，说明路径正确。难道是因为 Django 自带的默认 Web 服务器只显示特定路径下的图片？

解决方案 1：

试试这个，

设置.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()。

我希望这会有所帮助。

解决方案 2：

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

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

然后你只需确保该目录包含相关文件。

在开发过程中是另一个问题。Django 文档对此解释得简洁明了，直接链接到文档里再在这里写会更高效。不过，基本上，你需要定义一个站点媒体的视图，其中包含指向磁盘位置的硬编码路径。

就在这里。

解决方案 3：

我理解您的问题是关于存储在 MEDIA_ROOT 中的文件，但有时当您不再打算创建此类内容时，可以将内容存储在静态目录中。

这种情况可能比较少见，但无论如何，如果您的网站有大量“每日图片”，并且所有这些文件都存储在您的硬盘上，该怎么办？

在这种情况下，我认为将此类内容存储在 STATIC 中并没有什么不妥。

一切变得非常简单：

静止的

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

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

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

解决方案 4：

在开发过程中，

在你的应用文件夹中创建名为“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. 在终端运行命令python manage.py collectstatic（这会将 INSTALLED_APPS 中包含的所有应用的静态文件复制到全局静态文件夹 - STATIC_ROOT 文件夹）

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

别名 \static“path_to_your_project\static”

要求所有授予

就这样

解决方案 5：

我花了整整两天时间研究这个问题，所以想分享一下我的解决方案。截至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 中搜索文件，然后加载它

解决方案 6：

项目根目录下的 /media 目录

设置.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" >

解决方案 7：

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

解决方案 8：

你的

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

对于从磁盘读取的 HTML 文件，它会默认 URL 为file:///home/...。但对于从 Web 服务器读取的文件，URL 会变成类似 ，http://www.yourdomain.com/home/tony/london.jpg这可能是无效的 URL，并非您真正想要的 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等）提供静态文件。

解决方案 9：

另一种方法：

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

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

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

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

解决方案 10：

我试过各种方法都没用。不过这个方法有效。希望对你也有效。文件/目录必须位于以下位置：

项目/your_app/模板项目/your_app/静态

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

项目/应用程序/模板/文件名.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"

解决方案 11：

我花了很长时间才弄清楚这一点，所以我写这篇文章是为了尽可能清楚地解释什么对我有用，以帮助其他人。

假设您有一个名为 project_name 的项目和一个名为 app_name 的应用程序。您的根目录应如下所示：

/app_name
/project_name
manage.py

发展。

在开发模式下，你的 CSS 和 JS 文件应该在里面./app_name/static/app_name/..

但是你的图片应该在里面./app_name/static/media/..

现在将这些添加到settings.py：

如果尚未存在，请添加

    STATIC_URL = '/static/'

这告诉 Django 在哪里可以找到所有静态文件。

    MEDIA_URL = '/media/'

这会将 Django 指向静态加载后图片所在的文件夹。在本例中，该文件夹是 /media/ ，因为我们的图片位于 /static/media 中。

接下来，您应该将其放在需要图像的单独模板中（我认为将单个图像放在{% load static %}通用layout.html模板中就足够了，但事实并非如此）：

    {% load static %}

    <img src="{% static image_name %}>

根据您如何设置项目，image_name可能是图像文件的确切名称"image.jpg"，如，图像字段的变量user.image等

最后，进入 project_name urls.py（与 相同的文件夹settings.py）并将此行添加到末尾：

    from django.conf import settings
    from django.conf.urls.static import static


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

基本上告诉 Django 使用一种解决方法，以便您可以在开发中看到图像的使用。

就这样。您的项目现在将在您编写和测试代码（开发）时显示图像

生产。

当您想要部署您的项目时，您需要采取一些额外的步骤。

由于 Django 在生产过程中不将图像作为静态文件提供，因此您必须安装一个名为 Whitenoise 的中间件。

http://whitenoise.evans.io/en/stable/#installation

    pip install whitenoise

然后将以下内容添加到settings.py：

查找MIDDLEWARE并添加下方内容django.middleware.security.SecrutiyMiddleware：

    'whitenoise.middleware.WhiteNoiseMiddleware',

接下来我们必须定义我们的路径，这是因为在生产中 Django 基本上会收集我们所有应用程序中的所有静态文件并将它们重新排列在一个文件夹中。

添加以下内容settings.py：

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

这告诉 Django 在收集静态文件时将它们放在哪里。在本例中，我们告诉 Django 将文件放在根文件夹中。因此，在 collectstatic 运行后，我们的应用程序将如下所示

/app_name
/project_name
/static
manage.py

然后添加：

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

这告诉 django 将我们网站上的用户上传的文件放在哪里。

接下来我们要往上改成DebugFalse。

    Debug = False

调试模式用于开发测试，在生产环境中，您不希望应用显示错误代码以及出错的文件名和行数。这会带来潜在的安全威胁。一旦将调试模式设置为 false，Django 就会更改其提供静态文件的方式。因此，通常情况下，如果您现在运行应用，您将看不到图像。

完成这些之后，您已准备好进行生产。为了测试一切是否正常，您可以运行：

    python manage.py collectstatic

（如果提示，请输入“yes”）Django 将收集所有静态文件并根据需要进行排列。如果您现在运行项目，并在调试关闭的情况下，您应该会看到您的图像。您甚至可以根据需要删除 app_name 或任何其他应用中的各个静态文件夹，因为 Django 不会在生产环境中使用它们。一旦调试关闭，Django 将仅使用收集的静态文件夹中的静态数据。现在您可以部署项目了。

解决方案 12：

如果你在 Django 项目中提供在线图片的地址，它就能正常工作。对我来说，这很有效。你应该试试。

解决方案 13：

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

解决方案 14：

尝试将静态文件夹从基本路径复制到 public_html 文件夹。

    cp -r static/ ~/public_html/

解决方案 15：

我也遇到了这个问题。我的解决方案是在应用程序目录中创建 static/img 文件，然后将 image.jpg 放入其中。奇怪的是，它有效。

相关推荐
置顶 政府信创国产化的10大政策解读
政府信创国产化的10大政策解读
  政府信创国产化的10大政策解读一、信创国产化的背景与意义信创国产化，即信息技术应用创新国产化，是当前中国信息技术领域的一个重要发展方向。其核心在于通过自主研发和创新，实现信息技术应用的自主可控，减少对外部技术的依赖，并规避潜在的技术制裁和风险。随着全球信息技术竞争的加剧，以及某些国家对中国在科技领域的打压，信创国产化显...
工程项目管理   2482  
置顶 2025年20款好用的项目管理软件推荐，项目管理提效的20个工具和技巧
2025年20款好用的项目管理软件推荐，项目管理提效的20个工具和技巧
  为什么项目管理通常仍然耗时且低效？您是否还在反复更新电子表格、淹没在便利贴中并参加每周更新会议？这确实是耗费时间和精力。借助软件工具的帮助，您可以一目了然地全面了解您的项目。如今，国内外有足够多优秀的项目管理软件可以帮助您掌控每个项目。什么是项目管理软件？项目管理软件是广泛行业用于项目规划、资源分配和调度的软件。它使项...
项目管理软件   1533  
如何避免PLM项目范围蔓延？3大管控策略
如何避免PLM项目范围蔓延？3大管控策略
  PLM（产品生命周期管理）项目对于企业优化产品研发流程、提升产品质量以及增强市场竞争力具有至关重要的意义。然而，在项目推进过程中，范围蔓延是一个常见且棘手的问题，它可能导致项目进度延迟、成本超支以及质量下降等一系列不良后果。因此，有效避免PLM项目范围蔓延成为项目成功的关键因素之一。以下将详细阐述三大管控策略，助力企业...
plm系统   0  
PLM项目管理如何量化风险优先级？五维评估矩阵应用指南
PLM项目管理如何量化风险优先级？五维评估矩阵应用指南
  PLM（产品生命周期管理）项目管理在企业产品研发与管理过程中扮演着至关重要的角色。随着市场竞争的加剧和产品复杂度的提升，PLM项目面临着诸多风险。准确量化风险优先级并采取有效措施应对，是确保项目成功的关键。五维评估矩阵作为一种有效的风险评估工具，能帮助项目管理者全面、系统地评估风险，为决策提供有力支持。五维评估矩阵概述...
免费plm软件   0  
PLM开发流程优化：2025年缺陷管理工具与六西格玛的7种组合应用
PLM开发流程优化：2025年缺陷管理工具与六西格玛的7种组合应用
  引言PLM（产品生命周期管理）开发流程对于企业产品的全生命周期管控至关重要。它涵盖了从产品概念设计到退役的各个阶段，直接影响着产品质量、开发周期以及企业的市场竞争力。在当今快速发展的科技环境下，客户对产品质量的要求日益提高，市场竞争也愈发激烈，这就使得优化PLM开发流程成为企业的必然选择。缺陷管理工具和六西格玛方法作为...
plm产品全生命周期管理   0  
热门文章
项目管理软件
政府信创国产化的10大政策解读
2025soft
2025年20款好用的项目管理软件推荐，项目管理提效的20个工具和技巧
img020
使用 Python 'Requests' 模块的代理
img044
10个项目管理常见问题解答：包括难点和解决方法
项目管理软件
项目延期的原因有哪些？如何有效预防和管理？
项目管理软件
5个成功案例解析项目进度管理的最佳实践
项目里程碑计划模板
项目里程碑计划模板怎么写?设定项目里程碑的5个方法
项目管理软件有哪些？
热门标签
更多>
IPD流程 项目管理 plm项目管理软件 敏捷开发 项目管理软件 Scrum 敏捷项目管理 IPD流程管理 项目风险管理 项目管理工具 项目经理 极限编程  产品管理  项目经理职责 项目路线图 项目进度管理 团队管理 测试管理工具 项目预算管理 PMP认证 瀑布式管理 项目范围管理 IT科技 项目管理平台 工程项目管理 项目资源管理 pmp证书考试
曾咪二维码

扫码咨询，免费领取项目管理大礼包！

云禅道AD
禅道项目管理软件

云端的项目管理软件

尊享禅道项目软件收费版功能

无需维护，随时随地协同办公

内置subversion和git源码管理

每天备份，随时转为私有部署

免费试用