如何加载本地服务器共享文件中的图片到前端img标签？

问题根因 #

浏览器出于安全策略限制，禁止在HTTP/HTTPS协议加载的网页中直接访问file://协议的本地/局域网共享资源，你看到的Not allowed to load local resource报错就是该限制触发的。你直接把路径粘贴到浏览器地址栏能打开，是因为此时浏览器本身直接以file://协议访问资源，没有跨协议上下文限制。

你之前尝试的几种写法也都存在逻辑问题：

• 拼接process.env.PUBLIC_URL的方式仅适用于加载你前端项目本身的静态资源，和局域网SMB共享路径完全无关
• 直接填写rowData.path时，浏览器会将SMB路径识别为当前网页域名下的相对路径，自然无法找到资源
• require是前端构建工具在编译阶段处理静态资源的语法，无法处理接口返回的动态路径
• url()是CSS中设置背景图的专属语法，不能直接用在img标签的src属性中

可行解决方案 #

方案1（最推荐，生产可用）：托管静态资源

你尝试的用http-server托管共享文件夹的方式是完全符合Web规范的标准方案，静态资源本身就应该通过HTTP服务暴露：

1. 你可以用Nginx、Apache等更稳定的服务替代http-server做生产环境托管，还可额外配置缓存、访问权限控制、CDN加速等能力
2. 托管后只需要做简单的路径转换即可使用，示例代码：

// 假设你将Images目录托管在 http://192.168.1.245:8000/images 路径下
const imageSrc = rowData.path.replace('\\\\192.168.1.245\\Images\\', 'http://192.168.1.245:8000/images/')

<img
  src={imageSrc}
  alt={rowData.t_mitm}
  loading="lazy"
/>

方案2：后端接口返回图片资源

修改你的后端接口，直接返回对应图片的二进制流或者Base64编码，前端拿到后直接填入src属性即可，该方案适合图片体积较小的场景，缺点是Base64编码会比原文件体积增大约30%。

方案3（仅本地调试用）：关闭浏览器安全限制

如果只是本地开发调试使用，可以给浏览器添加启动参数关闭跨协议资源加载限制，以Chrome为例：

1. 右键Chrome快捷方式，选择「属性」
2. 在「目标」输入框的末尾追加参数：
   --allow-file-access-from-files --disable-web-security --user-data-dir="C:\ChromeDebugTemp"
3. 用该快捷方式打开浏览器即可正常加载本地资源，该方案绝对不能用于生产环境。

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