ToB企服应用市场:ToB评测及商务社交产业平台

标题: Django 中显示图片 [打印本页]

---

作者: 大连全瓷种植牙齿制作中心    时间: 2024-8-15 12:37
标题: Django 中显示图片
在 Django 中显示图片的根本步骤包括：设置静态文件和媒体文件的处理、上传图片、以及在模板中显示图片。以下是详细步骤：

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

1. from django.db import models
3. class Galery(models.Model):
4.     title = models.CharField(max_length = 120)
6.     def __unicode__(self):
7.         return self.title
9. class Image(models.Model):
10.     galery = models.ForeignKey(Galery)
11.     name = models.CharField(max_length = 50, unique = True)
12.     picture = models.ImageField(upload_to='media')
13.     description = models.CharField(max_length = 500)
14.     materials = models.CharField(max_length = 150)
16.     def __unicode__(self):
17.         return self.name

复制代码

在模板中试图显示图片：

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

复制代码

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

1. PROJECT_PATH = os.path.join(SETTINGS_DIR, os.pardir)
2. MEDIA_ROOT = os.path.join(PROJECT_PATH,'media')
3. TEMPLATE_DIRS = (
4.     TEMPLATE_PATH,
5. )
6. STATICFILES_DIRS = (
7.     STATIC_PATH,
8. )
9. STATIC_URL = '/static/'
11. MEDIA_URL = '/media/'

复制代码

我按照教程设置，但我仍旧无法在模板中正确显示图片。
办理方案：

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

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

复制代码

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

1. python manage.py collectstatic

复制代码

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

代码示例：

1. # models.pyfrom django.db import models
3. class Galery(models.Model):
4.     title = models.CharField(max_length = 120)
6.     def __unicode__(self):
7.         return self.title
9. class Image(models.Model):
10.     galery = models.ForeignKey(Galery)
11.     name = models.CharField(max_length = 50, unique = True)
12.     picture = models.ImageField(upload_to='media')
13.     description = models.CharField(max_length = 500)
14.     materials = models.CharField(max_length = 150)
16.     def __unicode__(self):
17.         return self.name
18. # settings.pyPROJECT_PATH = os.path.join(SETTINGS_DIR, os.pardir)
19. MEDIA_ROOT = os.path.join(PROJECT_PATH,'media')
20. TEMPLATE_DIRS = (
21.     TEMPLATE_PATH,
22. )
23. STATICFILES_DIRS = (
24.     STATIC_PATH,
25. )
26. STATIC_URL = '/static/'
28. MEDIA_URL = '/media/'
29. # urls.pyif settings.DEBUG:
30.     urlpatterns += patterns(
31.         'django.views.static',
32.         (r'media/(?P<path>.*)',
33.         'serve',
34.         {'document_root': settings.MEDIA_ROOT}), )
35. # 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 路由以及创建模板来展示图片。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4