如何显示我输入的图像

Question

我制作了一个将图像作为输入的按钮，但我找不到显示图片的方法。我试图制作一个空元素，然后像我在其他网站上看到的那样更改其 URL，但它没有用。

HTML

 <input 

     id="myImage"

     class="photo-upload"

     type="file"

     accept="image/*, image/jpeg">

     <img id="the-picture" width="200" />

JavaScripts

 const uploadPictureButton = document.querySelector(".photo-upload");

 uploadPictureButton.addEventListener("click", displayPicture);

 function displayPicture(event) {

     let image = document.getElementById("myImage");

     image.src = URL.createObjectURL(event.target.files[0]);

 };

Answer 1

代码中需要一些修复，必须读取文件并创建 URL，这里是代码的工作片段。const uploadPictureButton = document.querySelector(".photo-upload");&nbsp; uploadPictureButton.addEventListener('change', function () {&nbsp; &nbsp; displayPicture(this);&nbsp; });&nbsp;function displayPicture(input) {&nbsp; &nbsp; if (input.files && input.files[0]) {&nbsp; &nbsp; var reader = new FileReader();&nbsp; &nbsp; reader.onload = function (e) {&nbsp; &nbsp; &nbsp; document.getElementById('the-picture').setAttribute('src', e.target.result);&nbsp; &nbsp; };&nbsp; &nbsp; reader.readAsDataURL(input.files[0]);&nbsp; }&nbsp;}&nbsp;<input&nbsp;&nbsp; &nbsp; &nbsp;id="myImage"&nbsp; &nbsp; &nbsp;class="photo-upload"&nbsp; &nbsp; &nbsp;type="file"&nbsp; &nbsp; &nbsp;accept="image/*, image/jpeg"><img id="the-picture" width="200" />&nbsp;

Answer 2

您也可以使用innerHTML来显示图像。

Answer 3

试试这个，它对我有用<img height="100" width="100" alt="avatar" id="imgPreview> <input type="file" onchange="document.querySelector("#imgPreview").src = window.URL.createObjectURL(this.files[0])">