Django模板无法渲染ImageField图片 路径正确但显示破损如何解决

• settings配置拼写错误：你当前配置里的STATICFILES_DIR拼写错误，Django正确的配置项是STATICFILES_DIRS（末尾带S，复数形式），拼写错误会导致静态资源路径解析异常，修改为：

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

• 模板中图片路径写法错误且无空值判断：
  1. 直接写{{book.book_photo}}只能输出图片的存储相对路径，无法正确拼接MEDIA_URL，正确写法是调用url属性，但ImageField为空时调用url属性会抛出异常，就是你遇到的页面崩溃的原因
  2. 需要先判断图片字段是否有值，再渲染img标签，修改模板代码如下：

{% if book.book_photo %}
<img class="photo" src="{{book.book_photo.url}}" >
{% else %}
<!-- 可选：放默认占位图 -->
<img class="photo" src="{% static 'images/default_book.png' %}" >
{% endif %}

• 开发环境配置校验：
  1. 确认DEBUG = True，static()方法仅在DEBUG开启时生效，若DEBUG为False，需要配置Nginx等服务托管静态/媒体资源
  2. 确认媒体资源路由配置是写在项目根目录的urls.py中，而非子应用的urls文件内
  3. 检查上传图片后，static/images目录下是否真的生成了对应的图片文件，排除上传失败的问题
• 路径冲突排查：你当前MEDIA_URL = '/images/'，刚好和静态文件下的images目录路径重合，也可以尝试修改MEDIA_URL为/media/避免冲突，同步修改MEDIA_ROOT为os.path.join(BASE_DIR, 'media')，对应修改路由配置即可。

内容的提问来源于stack exchange，提问作者NewDeveloper