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

【问题标题】：How to load image from shared file on local server?如何从本地服务器上的共享文件加载图像？
【发布时间】：2021-11-12 08:58:11
【问题描述】：

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

[ {
        "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 标记中。我试过了：

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

它可能有效，但我明白了：

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

【问题讨论】：

您能否提供更多有关您本地后端服务器的详细信息？
@dave 我向数据库发出请求，该数据库返回的结果类似于“ACL-3382012763-1”。然后我将其作为 t_mitm 字段发送。仅此而已
还返回路径，如 \\192.168.1.245\Images\ACL-3382014766-1.jpg 或任何我尝试的方法
我认为您的服务器需要配置为通过 http 提供图像。这就是为什么当你启动http-server 时它会起作用。您的图像是如何托管的？你在运行apache吗？恩吉斯？ IIS？
src 值在您的浏览器页面源中看起来如何？

标签： javascript html css reactjs image

【解决方案1】：

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

解决方案：

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

【讨论】：

我知道这两种解决方案。目前我正在使用 http-server 图片文件夹，但我正在寻找是否有另一种可能性来执行它。我什至在想我的后端以某种方式获取图像并将 base64 字符串发送到前端
“我的后端以某种方式获取图像并将base64字符串发送到前端”相当于让您的后端提供图像（但由于编码扩展而效率较低）。跨度>
如果您更好地描述（在您的问题中）您的设置以及您需要此解决方案的方式/原因，我们可以为您提供更好的帮助
您可以将后端转换为 base64。您只需要相应地编写 IMG 标签。这是一个带有基本思想的 SO....stackoverflow.com/questions/8499633/…
但是让新手指出它可能不是你最好的答案......只是想解决你的base64点。

【解决方案2】：

我解决这个问题的方法是有一个 URL，你可以在后端调用它来提供图像。

您似乎已经在数据库中存储了本地文件路径，因此您的代码只会从该路径加载图像并返回它。我不确定您的 API / 后端是如何工作的，但添加一个返回文件的 API 端点应该不难。

然后您可以将此代码用于您的图像：

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

在此代码中，“id”是您尝试从数据库加载的任何项目的 ID。调用时，后端会：

从数据库中查找本地文件路径
读取文件
将文件返回给浏览器

【讨论】：