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

概述我需要在网页上显示图片而不上传.就像是 <img id="RuPic" src="file://localhost/D:/folder/image.jpg"/> 怎么做？ 您可以使用FileReader.readAsDataURL()轻松地执行此 *** 作.用户选择图像,您可以显示它,而无需上传它. 欲了解更多信息,请参阅https://developer.mozilla.org/en-US/docs/ 我需要在网页上显示图片而不上传.就像是

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

怎么做？

解决方法 您可以使用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...">

总结

以上是内存溢出为你收集整理的html – 如何在网页上显示本地图片？全部内容，希望文章能够帮你解决html – 如何在网页上显示本地图片？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。