JSFiddle - React, Tailwind, and code Playground

by Laberwurschd

HTML

<figure>
  <img src="" alt="">
  <figcaption>Vorschau</figcaption>
</figure>
<button>Bild wechseln</button>

CSS

figure {
  border: 1px solid black;
}

img {
  border: 1px solid red;
}

JavaScript

function MyOnDOMReady() {
  var images = [
      // einfaches Bild - Quelle: https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/Einbindung#Einbindung_in_CSS
      '<svg width="16" height="16" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="2,2 5,2 5,3 3,3 3,9 9,9 9,7 10,7 10,10 2,10"/><polygon points="6.2,2 10,2 10,5.79 8.58,4.37 6.5,6.5 5.5,5.5 7.6,3.4"/></svg>',
      // komplexeres Bild
      '<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-100 -100 1184 1104" style="enable-background:new 0 0 54 54;" xml:space="preserve"><path style="fill: #F09400;opacity:0.3;" d="M928 832h-416l-32 64h-352l-64-128h896zM904.34 256h74.86l44.8 448h-1024l64-640h484.080c-104.882 37.776-180.080 138.266-180.080 256 0 149.982 122.018 272 272 272 149.98 0 272-122.018 272-272 0-21.678-2.622-43.15-7.66-64zM1002.996 46.25l-198.496 174.692c17.454 28.92 27.5 62.814 27.5 99.058 0 106.040-85.96 192-192 192s-192-85.96-192-192 85.96-192 192-192c36.244 0 70.138 10.046 99.058 27.5l174.692-198.496c22.962-26.678 62.118-28.14 87.006-3.252l5.492 5.492c24.888 24.888 23.426 64.044-3.252 87.006zM640 196c-68.484 0-124 55.516-124 124s55.516 124 124 124 124-55.516 124-124-55.516-124-124-124z" /></svg>'
    ],
    index = 1;

  function swap() {
    index = 1 - index;
    document.querySelector("img").src = 'data:image/svg+xml;utf8,' +
      encodeURI(images[index]);
  }
  
  document.querySelector("button").addEventListener("click", swap);

  swap();
}

MyOnDOMReady();