通过Django Shell保存图片URL后视图无法加载资源问题求助

问题根源 #

你存入数据库的/home/etali/Images/moi.png是服务器本地文件系统的绝对路径，不是浏览器可通过HTTP协议访问的Web资源地址。浏览器请求该路径时会默认从访问用户的本地设备查找对应文件，或拼接你的站点域名后请求不存在的路由，因此无法加载到服务器上的图片。
如果你的场景是存储本地项目内的图片资源，更建议将picture字段从URLField改为ImageField，Django会自动处理路径存储、拼接逻辑，减少手动配置出错概率。

排查步骤 #

• 打开浏览器开发者工具的「网络」面板，查看图片请求的实际地址和返回状态码：如果状态码为404，说明请求的资源地址不存在，可确认是路径配置问题。
• 检查Django项目settings.py中是否配置了MEDIA_ROOT（本地媒体文件存储根路径）和MEDIA_URL（媒体文件对外访问的URL前缀）。
• 确认目标图片是否存放在Django可对外提供访问的资源目录下，未放在目录内的文件无法通过Web请求访问。

修复步骤 #

1. 配置媒体资源参数 #

在项目settings.py中添加如下配置：

# 媒体文件在服务器本地存储的根目录
MEDIA_ROOT = '/home/etali/Images/'
# 媒体文件对外访问的URL前缀
MEDIA_URL = '/media/'

2. 配置媒体资源访问路由 #

在项目根目录的urls.py中添加路由规则，让Django处理媒体资源的访问请求：

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

urlpatterns = [
    # 此处保留你原有项目的所有路由配置
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

3. 修正数据库中存储的图片路径 #

重新进入Django Shell，修改存储的路径为相对于MEDIA_ROOT的文件名即可：

album = Album.objects.get(title="Funambule")
album.picture = "moi.png"
album.save()

4. 调整模板的图片引用代码 #

在模板中拼接MEDIA_URL前缀，生成正确的可访问地址：

<img class="img-responsive" src="{{ MEDIA_URL }}{{ album.picture }}" alt="{{ album.title }}">

注意：生产环境部署时，不要使用Django本身处理静态/媒体资源，建议改用Nginx等反向代理服务处理资源访问，性能和安全性更高。

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