Solution 1 :

You can use JavaScript to dynamically update the image source of the img tag.

const img = document.getElementById('preview');
const input = document.getElementById('picker');
input.onchange = function(ev) {
  const file =[0]; // get the file
  const blobURL = URL.createObjectURL(file);
  img.src = blobURL;
<div class="container">
  <input type="file" class="title3" id="picker" />
  <img id="preview" alt="IDK why, but I can't display that." class="title3" width="200">

Solution 2 :

I updated the code.

const selectFile = evt => {
  const [file] =;
  if (file) {
    document.getElementById('preview').src = URL.createObjectURL(file);
<div class="container">
  <input type="file" class="title3" id="picker" onchange="selectFile(event)" />
  <img id="preview" alt="IDK why, but I can't display that." class="image">;

Problem :

I am working on a rudimentary site that enables users to upload images to the server and download them from it. I want to add a “preview” feature that will allow the user to see its photo beforehand. Here is my code:

 <div class="container">
        <input type="file" class="title3" id="picker"/>
        <img src= this.input alt="IDK why, but I can't display that." class="title3">;


Comment posted by DCR

you need to upload the file to your server first. Then provide the location in the img tag. What language are you using server side?

Comment posted by hod alkaly

Thanks for the snippet, helped me a lot

Comment posted by hod alkaly

Ended up using this snippet in my project, thanks!