JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet-src.js"></script>
<div id="map"></div>

CSS

#map {
  height: 500px;
}

JavaScript

var map = L.map("map");
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png").addTo(map);

map.setView([48.85, 2.35], 12);

marker = L.marker([48.85, 2.35]).addTo(map);
popupContent = document.createElement("img");
/*popupContent.onload = function () {
	marker.openPopup();
};*/
popupContent.src = "http://c4.staticflickr.com/1/691/21131215939_49601d06ef_b.jpg";
marker.bindPopup(popupContent, {
  maxWidth: "auto"
});

marker.openPopup();

////////////////////////////////////////////////////
// Listen to IMG "load" event on all popups.
////////////////////////////////////////////////////
document.querySelector(".leaflet-popup-pane").addEventListener("load", function (event) {
	var target = event.target,
  		tagName = target.tagName,
      popup = map._popup;
      
  console.log("got load event from " + tagName);
  
  if (tagName === "IMG" && popup) {
  	popup.update();
  }
}, true); // Capture the load event, because it does not bubble.