How I can display my selected image in table instead of image name in javascript

See more:

Javascript

image

table

I am adding values (Product name, Price, Quantity, and image). If I click on add button then the table is showing all the values. But I want to display an image instead of an image name in the table. Here is the code of this. Can anyone tell me what should I use on

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

var loadFile1 = function(event) {
    var output = document.getElementById('output1');
    output.src = URL.createObjectURL(event.target.files[0]);
    output.onload = function() {
      URL.revokeObjectURL(output.src)
    }
  }

function addOnClick() {
    var first = document.getElementById('first').value;
    var output1 = document.getElementById('img').files[0].name;
    var second = document.getElementById('second').value;
    var third = document.getElementById('third').value;
    var forth = document.getElementById('forth').value;


    if (first && output1 && second && third && forth) {
        let id = showtable.length + 1;
        showtable.push({ first: first, output1: output1, second: second, third: third, forth: forth, id: id })
        displayTableData();
        clearItems();
    }
}

What I have tried:

I have tried HTML, CSS and Javascript