Django REST API加载图片报错：Not allowed to load local resource

错误根源 #

这个报错是Chrome浏览器的安全限制导致，但问题本质出在你的Django配置或API返回的图片路径上：

• Chrome为防止本地文件被恶意网页读取，严格禁止网页加载file://协议开头的本地资源。如果你的API返回的是本地文件绝对路径（比如C:/project/media/photo.jpg），浏览器就会触发拦截。
• API返回200是因为接口本身正常返回了数据，但前端拿到的图片路径不符合浏览器安全要求，导致图片资源加载被阻断。

Django端排查与修复步骤 #

1. 确认开发环境的媒体文件路由配置 #

在项目根目录的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)

注意：此配置仅适用于开发环境，生产环境需用Nginx、Apache等Web服务器直接托管媒体文件，不要依赖Django。

2. 修正API返回的图片URL格式 #

确保API返回的图片路径是基于MEDIA_URL的相对路径或完整HTTP URL：

• 如果用Django REST Framework的序列化器，直接返回图片字段的url属性即可：

  class YourSerializer(serializers.ModelSerializer):
      image_url = serializers.SerializerMethodField()
  
      def get_image_url(self, obj):
          # 返回完整HTTP URL（推荐）
          return self.context['request'].build_absolute_uri(obj.image_field.url)
          # 或返回相对路径：return obj.image_field.url
      class Meta:
          model = YourModel
          fields = ['image_url']
  

• 禁止返回本地文件的绝对路径（比如os.path.join(settings.MEDIA_ROOT, filename)），这类路径会被浏览器识别为本地资源而拦截。

3. 验证媒体文件的存储路径 #

确认上传的图片确实存在于MEDIA_ROOT指定的目录下，且文件名、路径拼写无错误。

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