JSFiddle - React, Tailwind, and code Playground

by Simplybj

HTML

<div id="thumbs">
  <a href="#img1"><img id="thumb1" src="photo.png"  style="display:none;"></a>
  <a href="#img2"><img id="thumb2" src="" style="display:none;"></a>
  <a href="#img3"><img id="thumb3" src="" style="display:none;"></a>
  <a href="#img4"><img id="thumb4" src="" style="display:none;"></a>
  <a href="#img5"><img id="thumb5" src="" style="display:none;"></a>
  <a href="#img6"><img id="thumb6" src="" style="display:none;"></a>
  <a href="#img7"><img id="thumb7" src="picture.jpg" style="display:none;"></a>
  <a href="#img8"><img id="thumb8" src="" style="display:none;"></a>
  <a href="#img9"><img id="thumb9" src="" style="display:none;"></a>
  <a href="#img10"><img id="thumb10" src="" style="display:none;"></a>
  <a href="#img11"><img id="thumb11" src="stock.gif" style="display:none;"></a>
  <a href="#img12"><img id="thumb12" src="" style="display:none;"></a>
</div>

JavaScript

var nodelist = document.getElementById("thumbs").children.length;
    for (var images = 0; images <= nodelist; images++) {

      var image = document.getElementsByTagName("img")[images];
      var src = image.getAttribute("src");
      if (src.length > 0) {
        //write here your logic
        image.style.display = "block";        
      }
      else
      {
       image.src = "clearpixeldot.png";
      }
    }