JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <body>
        <button>Replace IMGs with DIVs</button>
        <img src="https://via.placeholder.com/144x65" alt="Dog" />
        <img src="https://placehold.it/144x65/849695/ffffff" alt="Gorilla"/>
        <img src="https://placehold.it/144x65/978298/000000" alt="Elephant"/>
    </body>
</html>

CSS

div.replacedImage {
    color:#fff;
    font: bold 1em Verdana;
    padding: 5px;
}

JavaScript

$(function() {
    $("button").click(function() {
        $("img").each(function(i, elem) {
          var img = $(elem);
          var div = $("<div />").css({
            background: "url(" + img.attr("src") + ") no-repeat",
            width: img.width() + "px",
            height: img.height() + "px"
          });
              
          div.html(img.attr("alt"));
          div.addClass("replacedImage");
            
          img.replaceWith(div);
        });
    });
});