如何在网页上显示本地图片？

Question

我需要在网页上显示图片而不上传它.就像是

 <img id="RuPic" src="file://localhost/D:/folder/image.jpg"/>

怎么做？

Answer 1

你可以轻松地使用它FileReader.readAsDataURL().用户选择图像,您无需上传即可显示图像.

有关详细信息,请参阅https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

这是代码:

function previewFile() {
    // Where you will display your image
    var preview = document.querySelector('img');
    // The button where the user chooses the local image to display
    var file = document.querySelector('input[type=file]').files[0];
    // FileReader instance
    var reader  = new FileReader();

    // When the image is loaded we will set it as source of
    // our img tag
    reader.onloadend = function () {
      preview.src = reader.result;
    }

    
    if (file) {
      // Load image as a base64 encoded URI
      reader.readAsDataURL(file);
    } else {
      preview.src = "";
    }
  }

  <input type="file" onchange="previewFile()"><br>
  <img src="" height="200" alt="Image preview...">

Answer 2

好吧，您不能让其他人访问您的本地文件系统！您需要像 Apache 这样的服务器服务，让您的计算机每天 24 小时运行，确保它不会过热，关心良好的安全性等等，以使这一切成为可能。由于服务器管理既昂贵又耗时，大多数人让专业人士为我们托管我们的东西（网络托管）。

总之，如果您不想运行自己的服务器，那么将其上传到您选择的网络托管商会更容易。