如何从本地服务器上的共享文件加载图像？

Question

我正在从本地服务器后端接收数据，我想加载图像。我收到这样的对象数组：

[ {
        "t_pdno": "SFC093989",
        "t_mitm": "SLS005251ACL-3382012763-1",
        "t_qrdr": 60,
        "Operations": "10,20,30,40,60,70",
        "path": "\\\\192.168.1.245\\Images\\ACL-3382012763-1.jpg"
    },
    {
        "t_pdno": "SFC093991",
        "t_mitm": "SLS005251ACL-3382012765-1",
        "t_qrdr": 120,
        "Operations": "10,20,30,40",
        "path": "\\\\192.168.1.245\\Images\\ACL-3382012765-1.jpg"
    },]

在我 console.log(rowData.path) 后，路径看起来像这样：

\\192.168.1.245\图像\ACL-3382014766-1.jpg

因此，粘贴到浏览器中是完美的，我得到了图像：

问题是我无法将其加载到我的img标签中。我试过：

<img
    src={process.env.PUBLIC_URL + rowData.path}
    alt={`${rowData.t_mitm}`}
     loading="lazy"
              />

<img
     src={rowData.path}
     alt={`${rowData.t_mitm}`}
     loading="lazy"
              />




  <img
      src={require(rowData.path)}
      alt={`${rowData.t_mitm}`}
      loading="lazy"
                  />



 <img
      src={`url(rowData.path)`}
      alt={`${rowData.t_mitm}`}
      loading="lazy"
                  />

没有任何效果。我怎样才能加载图像？

更新：

如果我将 http-server 安装到 \\192.168.1.245 服务器并在特定端口上托管图像文件夹，我就可以接收图像。但这意味着我将始终必须托管文件夹。

更新2：

如果我尝试像这样加载图像：

   <img
          src={`file://192.168.1.245/Images/${rowData.t_mitm}`}
          alt={`${rowData.t_mitm}`}
          loading="lazy"
                      />

它可能有效，但我得到：

不允许加载本地资源：file://192.168.1.245/Images/ACL-3382012763-1.jpg

Answer 1

尽管浏览器支持file://打开本地文件，但支持到此为止。在网页中打开本地文件被认为是一种安全违规。这就是您的系统无法工作的原因。

解决方案：

• 规范的解决方案是让系统将您的本地文件夹作为http://
• 如果您不喜欢提供文件夹的想法，并且如果您可以使用“网站”控制浏览器，您可以尝试在禁用安全功能的情况下启动浏览器（因为Chrome您可以尝试--allow-file-access-from-files并--disable-web-security标记）