当前位置：首页 > news >正文

Django 中显示图片

news 2025/12/3 10:18:27

在 Django 中显示图片的基本步骤包括：配置静态文件和媒体文件的处理、上传图片、以及在模板中显示图片。以下是详细步骤：

在这里插入图片描述

问题背景：

我在学习 Django 并在构建一个简单的网站，我尝试使用模板语言添加一些图片，但显示的结果是只有小的蓝色问号图标，而不是预期的图片。

以下是使用的模型定义：

from django.db import modelsclass Galery(models.Model):title = models.CharField(max_length = 120)def __unicode__(self):return self.titleclass Image(models.Model):galery = models.ForeignKey(Galery)name = models.CharField(max_length = 50, unique = True)picture = models.ImageField(upload_to='media')description = models.CharField(max_length = 500)materials = models.CharField(max_length = 150)def __unicode__(self):return self.name

在模板中试图显示图片：

{%extends 'home/base.html'%}
{%load static%}
{%block body%}
<div class="col-lg-12"><h1 class="page-header">My Projects</h1>
</div>
{%if image%}    {%for n in image%}  <div class="col-lg-3 col-md-4 col-xs-6 thumb"><a class="thumbnail" href=""><img class="img-responsive" src="{% static 'media/{{n.image.url}}' %}"></a></div>{%endfor%}
{%endif%}{%endblock%}

在设置中配置了媒体文件路径：

PROJECT_PATH = os.path.join(SETTINGS_DIR, os.pardir)
MEDIA_ROOT = os.path.join(PROJECT_PATH,'media')
TEMPLATE_DIRS = (TEMPLATE_PATH,
)
STATICFILES_DIRS = (STATIC_PATH,
)
STATIC_URL = '/static/'MEDIA_URL = '/media/'

我按照教程设置，但我仍然无法在模板中正确显示图片。

解决方案：

检查 MEDIA_URL 和 MEDIA_ROOT 是否正确。MEDIA_URL 是用于访问媒体文件的 URL 前缀，而 MEDIA_ROOT 是媒体文件在服务器上的实际存储路径。确保它们的值是正确的，并且媒体文件已经上传到 MEDIA_ROOT 中。
检查是否设置了 staticfiles_dirs，这是用于查找静态文件的路径。确保 TEMPLATE_DIRS 中包含静态文件所在的路径。
确保在 urls.py 中正确地配置了媒体文件的服务。在 urlpatterns 中添加以下代码：

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

确保已经收集静态文件。可以通过运行以下命令进行收集：

python manage.py collectstatic

刷新浏览器并重新加载页面，检查图片是否正确显示。

代码示例：

# models.py
from django.db import modelsclass Galery(models.Model):title = models.CharField(max_length = 120)def __unicode__(self):return self.titleclass Image(models.Model):galery = models.ForeignKey(Galery)name = models.CharField(max_length = 50, unique = True)picture = models.ImageField(upload_to='media')description = models.CharField(max_length = 500)materials = models.CharField(max_length = 150)def __unicode__(self):return self.name# settings.py
PROJECT_PATH = os.path.join(SETTINGS_DIR, os.pardir)
MEDIA_ROOT = os.path.join(PROJECT_PATH,'media')
TEMPLATE_DIRS = (TEMPLATE_PATH,
)
STATICFILES_DIRS = (STATIC_PATH,
)
STATIC_URL = '/static/'MEDIA_URL = '/media/'# urls.py
if settings.DEBUG:urlpatterns += patterns('django.views.static',(r'media/(?P<path>.*)','serve',{'document_root': settings.MEDIA_ROOT}), )# template.html
{% for n in image %}  <div class="col-lg-3 col-md-4 col-xs-6 thumb"><a class="thumbnail" href=""><img class="img-responsive" src="{{ n.image.url }}"></a></div>
{% endfor %}