Django如何在模板中正确显示存储在数据库中的图片？

问题1：模板变量引用错误 #

你在循环中遍历的变量是img，但图片src处错误使用了不存在的ingredient变量，导致无法获取到图片路径。
解决方法：把模板代码中的{{ingredient.pictureLink.url}}改为{{img.pictureLink.url}}。
修正后的模板代码：

{% for img in images %}  
<tr>
  <td>{{img.title}}</td>
  <td><img src="{{img.pictureLink.url}}" width="120"/></td>
</tr>
{% endfor %} 

问题2：数据库存储的路径格式错误 #

Django的ImageField默认存储相对MEDIA_ROOT的相对路径，你存储的是本地绝对路径C:\Users"Me"\Desktop"project"\image\leaves.png，无法被Django正确识别生成可访问的URL。
解决方法：

• 不要手动向数据库写入图片路径，通过Django的ORM或表单上传图片时，框架会自动生成正确的相对路径
• 现有数据可以手动修改为相对路径media/leaves.png（对应你upload_to="media"的配置）

问题3：缺少开发环境的媒体资源路由配置 #

仅在settings.py中配置MEDIA_ROOT和MEDIA_URL不够，需要在项目根目录的urls.py中添加媒体资源的路由映射，开发阶段Django才会处理媒体文件的访问请求。
解决方法：在根urls.py中添加如下代码：

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

urlpatterns = [
    # 你原有其他路由
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

问题4：文件存放路径不匹配 #

你配置的ImageField参数upload_to="media"，意味着上传的图片会保存在MEDIA_ROOT/media/目录下，你现在把leaves.png直接放在MEDIA_ROOT（即image目录）下，路径不匹配会导致找不到文件。
解决方法：把图片放到image/media目录下，或者修改upload_to参数为空字符串upload_to=""。

内容的提问来源于stack exchange，提问作者Tico van Hoek