title: How to display an image which i inputted
body: <p>i made a button that takes an image as an input but i cant find a way to show the picture.
  i have tried to make an empty  element and then change its URL like i saw on a different website but it didnt work.</p>
  <ul>
  <li><p>HTML</p>
  <pre><code> &lt;input 
       id=&quot;myImage&quot;
       class=&quot;photo-upload&quot;
       type=&quot;file&quot;
       accept=&quot;image/*, image/jpeg&quot;&gt;
  
       &lt;img id=&quot;the-picture&quot; width=&quot;200&quot; /&gt;
  </code></pre>
  </li>
  <li><p>JavaScripts</p>
  <pre><code> const uploadPictureButton = document.querySelector(&quot;.photo-upload&quot;);
  
   uploadPictureButton.addEventListener(&quot;click&quot;, displayPicture);
  
   function displayPicture(event) {
       let image = document.getElementById(&quot;myImage&quot;);
       image.src = URL.createObjectURL(event.target.files[0]);
   };
  </code></pre>
  </li>
  </ul>