Javascript 如何显示我输入的图像

我做了一个按钮，把一个图像作为输入，但我找不到一种方式来显示图片。 我试图创建一个空元素，然后像在其他网站上看到的那样更改其URL，但没有成功

• HTML

   <input 
       id="myImage"
       class="photo-upload"
       type="file"
       accept="image/*, image/jpeg">
  
       <img id="the-picture" width="200" />
  

---

代码中需要一些修复，必须读取文件并创建URL，以下是代码的工作片段

const uploadPictureButton=document.querySelector（“.photo upload”）；
uploadPictureButton.addEventListener（'change'，function（）{
显示图片（本）；
});
功能显示画面（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
document.getElementById（'the-picture'）.setAttribute（'src'，e.target.result）；
};
reader.readAsDataURL（input.files[0]）；
}
}

---

您也可以使用它来显示图像。
试试这个，它适合我

---

这已经得到了回答。这回答了你的问题吗？我试着运行它，效果很好！但是我真的不明白为什么，你能给我解释一下为什么你做了：if（上传图片按钮），而不是直接去功能吗？我删除了它，这里不需要它，谢谢你指出！

 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]);
 };