在 Django 中显示图片的基本步骤包括:配置静态文件和媒体文件的处理、上传图片、以及在模板中显示图片。以下是详细步骤:
问题背景:
我在学习 Django 并在构建一个简单的网站,我尝试使用模板语言添加一些图片,但显示的结果是只有小的蓝色问号图标,而不是预期的图片。
以下是使用的模型定义:
python
from django.db import models
class Galery(models.Model):
title = models.CharField(max_length = 120)
def __unicode__(self):
return self.title
class 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
在模板中试图显示图片:
html
{%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%}
在设置中配置了媒体文件路径:
python
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
中添加以下代码:
python
if settings.DEBUG:
urlpatterns += patterns(
'django.views.static',
(r'media/(?P<path>.*)',
'serve',
{'document_root': settings.MEDIA_ROOT}), )
-
确保已经收集静态文件。可以通过运行以下命令进行收集:
python manage.py collectstatic
-
刷新浏览器并重新加载页面,检查图片是否正确显示。
代码示例:
python
# models.py
from django.db import models
class Galery(models.Model):
title = models.CharField(max_length = 120)
def __unicode__(self):
return self.title
class 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 %}
通过上述步骤,你可以在 Django 项目中实现图片的上传和显示功能。主要步骤包括配置静态和媒体文件路径、创建上传表单和处理视图、配置 URL 路由以及创建模板来展示图片。