html – 如何在网页上显示本地图片?

我需要在网页上显示图片而不上传.就像是
<img id="RuPic" src="file://localhost/D:/folder/image.jpg"/>

怎么做?

@H_502_6@

解决方法

您可以使用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...">
@H_502_6@ @H_502_6@

相关文章

操作步骤 1、进入elasticsearch的plugin,进入ik。进入config。 2、在config下面建立以.dic为后缀的字典...
lengend data数据中若存在&#39;&#39;,则表示换行,用&#39;&#39;切割。
代码实现 option = { backgroundColor: &amp;#39;#080b30&amp;#39;, tooltip: { trigger: &...
问题原因 原因在于直接在js中取的变量并复制给var变量。 于是就变成这样。 解决办法 var data = &#...
前言 最近做了一个调查问卷导出的功能,需求是将维护的题目,答案,导出成word,参考了几种方案之后,选...
对于很多人来说,用字符编码都是熟能生巧,而不清楚为什么是那样的字符编码,所以我在这列了一个表,翻...