Django项目中HTML加载网络驱动器图片报‘Not allowed to load local resource’求助

浏览器的安全机制会禁止HTTP/HTTPS协议加载的网页直接访问file://协议资源——哪怕是网络共享驱动器的路径也不行，这和地址栏直接访问的权限逻辑完全不同，这就是你遇到报错的核心原因。

你提到的前端请求后端获取图片的方案完全可行，通过Django后端代理图片请求就能绕开这个限制，具体实现步骤如下：

1. 编写Django图片代理视图 #

创建一个视图函数，负责读取网络驱动器上的图片文件并返回给前端：

from django.http import HttpResponse, Http404
import os
import mimetypes

def serve_network_image(request, image_path):
    # 网络驱动器的根路径，替换成你实际的共享目录根地址
    network_root = r"\\sc19\dept0213\SSC_Data\SVD\SVD Robot Experiment\4b9262caa1b64079ad8b31c3a3662598_1\Measurement\bot_Images"
    full_image_path = os.path.join(network_root, image_path)

    # 校验文件是否存在
    if not os.path.isfile(full_image_path):
        raise Http404("Image does not exist")

    # 读取图片内容并返回响应
    with open(full_image_path, 'rb') as img_file:
        image_content = img_file.read()
    
    # 自动识别图片MIME类型
    content_type, _ = mimetypes.guess_type(full_image_path)
    return HttpResponse(image_content, content_type=content_type or "image/png")

2. 配置URL路由 #

在项目的urls.py中添加对应路由，让前端能访问到这个视图：

from django.urls import path
from .views import serve_network_image

urlpatterns = [
    # 其他已存在的路由...
    path("network-images/<str:image_path>/", serve_network_image, name="serve_network_image"),
]

3. 修改前端模板的img标签 #

将原来的file://路径替换为Django的路由地址：

<!-- 直接指定单张图片 -->
<img src="{% url 'serve_network_image' image_path='4.png' %}" alt="Robot Experiment Image">

<!-- 如果是动态图片路径，比如从上下文变量获取 -->
<img src="{% url 'serve_network_image' image_path=image_file_name %}" alt="Robot Experiment Image">

关键注意事项 #

• 确保运行Django的进程用户（比如开发服务器的登录用户、生产环境的uWSGI/Gunicorn运行用户）拥有访问该网络共享驱动器的权限，否则会出现文件读取失败的问题。
• 如果图片路径包含特殊字符或多级目录，image_path参数会自动处理，比如传递sub-folder/5.png即可对应共享目录下的子文件夹图片。
• 可以根据需求添加缓存逻辑，比如使用Django的缓存框架缓存图片响应，减少重复读取文件的开销。

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