I have an img-tag and use a data-image base64 URI as source. Of course, browsers are caching this source. I do not want caching. If it would be a normal URL, I would add a random query-parameter value to prevent the caching.

What can I do to prevent the caching of this data-image base64 URI source?

img with data-image base64 URI:
<img src="data:image/svg+xml;base64,PD94bWw==">

img with normal URL source and query-param to prevent caching:
<img src="https://foo?1234RandomString">

Since the original image is SVG, I could use a data-image SVG URI and add a custom attribute to this SVG to prevent caching. This works but I find that very ugly.

PS: Why do I need it?
I have a large list of img-tags. I would like to use the lazy loading mechanism to generate the actual source URL lazily in vue3.

Look at this extract. Initially, it sets the src to the data-image URI. When this is lazily loaded, the actual image source is created and set.

Problem: Lazy loading does not work in Chrome for cached source values. So, if initialSrc is cached for the first image, this mechanism will not work for all the other images.

<img :src="mySource" loading="lazy" @load="onLoad">

const initialSrc = "data:image/svg+xml;base64,PD94bWw=="

const imageSrc = ref()
const onLoad = async () => {
      if (!imageSrc.value) {
        imageSrc.value = await createRealSrc();
      }
    };

const mySource = computed(() => imageSrc.value ?? initialSrc)