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

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\Images\ACL-3382014766-1.jpg

所以粘贴到浏览器中是完美的，我得到了图像:

问题是我无法在我的 中加载它图片 标签。我试过了:

<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"
                      />

它可能有效，但我得到:

Not allowed to load local resource: file://192.168.1.245/Images/ACL-3382012763-1.jpg

Answer 1

尽管浏览器支持 file://打开本地文件，支持到此结束。在网页中打开本地文件被视为违反安全规定。这就是您的系统无法正常工作的原因。
解决方案:

规范的解决方案是让系统将您的本地文件夹作为 http:// 提供服务。

如果您不喜欢提供文件夹的想法并且如果 您可以控制浏览器 使用您的“网站”，您可以尝试启动禁用安全功能的浏览器(对于 Chrome，您可以尝试 --allow-file-access-from-files 和 --disable-web-security 标志)