Django项目中管理员上传图片无法在HTML页面正常加载的技术咨询

我来帮你理清这个问题的逻辑，你遇到的核心问题是模板里引用图片的方式不对，导致浏览器找错了路径。

问题根源 #

你在模板里直接写 <img src="{{exp.image}}">，这里 {{exp.image}} 输出的是图片的相对上传路径（比如 uploads/atomic_arts.png）。浏览器加载这个图片时，会把这个相对路径拼接到当前页面的URL后面——你的页面URL是 /resume_site/modelview/，所以最终浏览器请求的路径是 /resume_site/modelview/uploads/atomic_arts.png，这显然不是你存储图片的 MEDIA_ROOT/uploads/ 对应的URL路径。

解决方案：使用正确的图片URL生成方式 #

Django的 ImageField 提供了一个 url 属性，它会自动结合你配置的 MEDIA_URL 和图片的相对路径，生成正确的完整URL。你只需要修改模板里的图片标签：

修改模板代码 #

把原来的图片标签改成：

<img src="{{ exp.image.url }}" alt="{{ exp.studio_name }}">

这样生成的URL会是 /media/uploads/atomic_arts.png，正好匹配你在 settings.py 里配置的 MEDIA_URL = '/media/'，再结合根 urls.py 里的 static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) 配置，Django就能正确找到 MEDIA_ROOT/uploads/ 下的图片了。

确认现有配置的正确性 #

你的其他配置其实都是对的，再帮你核对一下：

• settings.py 里的 MEDIA_ROOT 和 MEDIA_URL 配置正确，upload_to='uploads/' 会把图片存在 MEDIA_ROOT/uploads/ 下。
• 根 urls.py 里在DEBUG模式下添加的 static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)，确保开发环境中Django能正确提供媒体文件。

生产环境注意事项 #

如果以后部署到生产环境（DEBUG=False），不能再用 static() 函数来处理媒体文件，需要用Nginx、Apache这类web服务器直接映射 MEDIA_URL 到 MEDIA_ROOT 目录，或者使用AWS S3、阿里云OSS这类云存储服务来托管媒体文件。

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