Django项目中上传的用户头像前端无法显示问题求助（Admin面板可正常显示）

我之前也碰到过一模一样的问题，结合你给出的代码和配置来看，问题大概率出在媒体文件的路由配置或者模板中图片路径的写法上，下面是具体的解决步骤：

1. 补全开发环境的媒体文件路由 #

Django默认不会在开发阶段自动处理媒体文件的HTTP请求，所以你需要在项目根目录的urls.py里添加媒体文件的路由映射，否则前端请求图片时会直接返回404。

打开项目根urls.py，添加以下代码：

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

# 保留你原有的urlpatterns配置
urlpatterns = [
    path('admin/', admin.site.urls),
    # 其他已有的路由...
]

# 追加媒体文件的路由规则
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

注意：这个配置只适合开发环境使用！生产环境请用Nginx、Apache等Web服务器来托管媒体文件，不要依赖Django的这个静态文件服务。

2. 修正模板中的图片路径写法 #

你现在手动拼接/media/路径的方式不够灵活，而且容易出错。Django的ImageField（你的profile_pic应该是这个字段类型）自带了.url属性，会自动生成正确的媒体文件访问URL。

把index.html里的img标签改成这样：

<img src="{{ user_more_info.profile_pic.url }}" width="200px">

这样不管你后续怎么修改MEDIA_URL的配置，模板都能正确获取到图片的访问路径。

3. 额外的排查点 #

如果上面两步做完还是不行，可以试试这些排查方法：

• 在模板里临时添加{{ user_more_info.profile_pic.url }}，看看输出的URL是什么，然后复制到浏览器地址栏直接访问，确认图片是否能正常打开；
• 检查MEDIA_ROOT的实际路径是否正确，你可以在Django shell里执行from django.conf import settings; print(settings.MEDIA_ROOT)，然后去这个目录下确认图片是否真的上传到了这里；
• 检查服务器的文件权限，比如Linux系统下，运行Django的用户是否有读取媒体文件的权限。

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