JavaScript - 来自本地文件 linux 的图像 src答案

【问题标题】：JavaScript - Image src from local file linuxJavaScript - 来自本地文件 linux 的图像 src
【发布时间】：2019-12-17 14:39:05
【问题描述】：

我有一台服务器正在运行为 HTML 页面提供服务，并希望提供驻留在 Linux 本地驱动器中的图像。我读到我可以通过附加file://.. 来实现它。但是，它似乎不适用于我的情况，我怀疑它可能不适用于我的机器（Ubuntu 18.04）。没有出现错误，只是 img 似乎没有找到图像。

<img src="file:///home/my_user/my_picture.png">

上述代码 sn-p 的图像结果：

在this 线程中，我发现一个答案说现代浏览器出于安全原因不允许提供本地文件。

如果是这种情况，是否有任何替代方案？

我正在考虑将图像字节数据传递给客户端，让客户端 javascript 构造图像。但是，我担心的是当有很多图像要传输时的性能问题。另外，我认为这很丑，因为客户端保证与服务器在同一台机器上。

【问题讨论】：

如果他们可以分配给那个图像，他们也可以分配给一些文件，比如password.txt 或employee.xlsx.... 为什么你还想使用它？

标签： javascript html

【解决方案1】：

file:/// 用于本地文件 - 即运行浏览器的计算机中的文件。

如果要加载不在服务器公用文件夹中的文件，

可以将镜像文件夹挂载到公用文件夹中
在您的服务器中创建一个路由，将图像请求解析到图像文件夹

【讨论】：

该文件与我使用的浏览器位于同一台计算机上。知道为什么这不起作用吗？安全性是否阻止浏览器显示使用file:///？
@DarrenChristopher 是的。它可以防止网站读取您的私人数据。如果允许，任何网站都可以在未经您同意的情况下窃取您所有文件的内容，并进行分析、上传到某个地方，甚至出售它们。
@DarrenChristopher 当然文件和浏览器在同一台电脑上，但是浏览器可以浏览网站，可以运行任何javascript代码。如果允许读取你机器的文件，谁知道网站会对你机器的文件做什么，而它只是一个陌生人写的任意脚本放在某个网站上。

【解决方案2】：

如果您使用file:/// 协议加载imgs，则这些文件位于客户端计算机上，而不是您的服务器计算机上。而且您不会知道客户端机器上图像的路径，因为每个客户端的机器都是不同的。然后，如果图像是您的，而不是客户的，您显然必须以某种方式将其转移给他们，即使有放弃，或者只有 1 个图像。当然，您可以使用不同的方法优化传输过程，例如传输 base-64 字节数据、缩小图像大小、使用与代码服务器不同的服务器传输图像等。但无论如何，你 必须以某种方式将其转移给他们。

客户端保证与服务器在同一台机器上

如何保证客户端与服务器在同一台机器上？这是您故意下载的应用程序吗？如果它是浏览器，它可以是 Internet 上的任意站点。所以你的句子不在浏览器的上下文中。

如果你想阅读客户的图片，你必须让他们选择他们允许你阅读的图片，通过File Reader，试试下面的sn-p。

function showpreview(e) {
  var reader = new FileReader();
  reader.onload = function (e) {
    document.querySelector('img').src = e.target.result;
  }
  //Imagepath.files[0] is blob type
  reader.readAsDataURL(e.files[0]);
}

<img style="width: 100vw" src="" alt="">
<input type="file" onchange='showpreview(this)'>

【讨论】：