title: Display images in a table column with data
body: <p>I am working on firebase cloudfirestore and I want to display image in a table column with data.</p>
  
  <p>Currently I have tried to use setattribute to display the images, however when I change to dataset input, the images only shows urls. Can provide more information if needed.</p>
  
  <p>add inspection
  <a href="https://i.imgur.com/YmDN9pa.jpg" rel="nofollow noreferrer">https://i.imgur.com/YmDN9pa.jpg</a></p>
  
  <p>view inspection
  <a href="https://i.imgur.com/GDwsYE0.jpg" rel="nofollow noreferrer">https://i.imgur.com/GDwsYE0.jpg</a></p>
  
  <pre><code>uploadimage.js
  var downloadU = "";
   uploadTask.snapshot.ref.getDownloadURL().then(function (downlaodURL) {
              //get your upload image url here...
              downloadU = downlaodURL;
              console.log(downlaodURL);
              document.getElementById('showImg').innerHTML = '&lt;img src="' +  downlaodURL + '" width="50%" height="50%"&gt;';
          });
  
  function returnPath()
  {
      return downloadU;
  }
  
  addinspection.js
  let photo = document.createElement('img');
      photo.textContent = doc.data()['photo'];
      photo.setAttribute('src', photo.textContent);
  
  form.addEventListener('submit', (e) =&gt; {
      e.preventDefault();
      db.collection('Inspection').add({
          photo : downloadU,
          HazardDiscription : form['HazardDiscription'].value,
          Location : form['Location'].value,
      }).then(() =&gt; {
          window.location.href = "addinspection.html";
      })
  
      form['photo'].value = '';
      form['HazardDiscription'].value = '';
      form['Location'].value = '';
  
  viewinspection.js
  function renderTable(doc){ 
  dataSet.push([++count, doc.data()['photo'], doc.data()['HazardDiscription'], doc.data()['Location']);
  }
  
  db.collection('Inspection').onSnapshot(snapshot =&gt; {
      let changes = snapshot.docChanges();
      changes.forEach(change =&gt; {
          if(change.type == 'added'){
              renderTable(change.doc);
          } else if (change.type == 'removed'){
              let li = tbody.querySelector('[data-id=' + change.doc.id + ']');
              tbody.removeChild(li);
          }
      })
  
      $('#dataTable').DataTable({
          data: dataSet
      });
  })
  </code></pre>
  
  <p>Expected result should show images in the column instead of urls.</p>