Lazy loading B64 images from vuex Store

Hello,
I have a template with 12 img tags

    <img
        :src="item.logo"
        onerror="this.style.visibility='hidden'"
    />

The img tag is inside a loop.

The value of item.logo is for example:

"data:image/svg+xml;base64,PHN2ZyBpZD0iRWJlbmVfMSIgZGF0YS1uYW1lPSJFYmVuZSAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDIuNzYgNTYuODMiPjxkZWZzPjxzdHlsZT4uY2xzLTEsLmNscy0yLC5jbHMtM3tmaWxsOiNmZmY7fS5jbHMtMXtvcGFjaXR5OjAuNjt9LmNscy0ze29wYWNpdHk6MC41OTt9LmNscy00e2ZpbGw6I2EyMWMyNjt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmxvZ28td25kLXR2LWluZm88L3RpdGxlPjxyZWN0IGNsYXNzPSJjbHMtMSIgeD0iMjYuODEiIHk9IjAuMTQiIHdpZHRoPSIxMTUuOTUiIGhlaWdodD0iNTYuNjkiLz48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik04Ni44OSw3OS40OWgtNS43VjU0LjQxaDUuN1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zOS4wMSAtMzcuO"

I do not put here the whole content of the b64, just know that it is a base64 encoded SVG.
The SVGs show correctly.

My problem is that the page rendering is quite long, because the device I use is very slow.
But when I modify the item.logo value by a URI that points to a hosted SVG, the page renders fast without showing at once the svgs, allowing the user to interact with the page while the logos load (lazy load?)

My question:
Is it possible to have a kind of asyncroneous load of these images in the case they are stored in the Vuex store in a b64 format? So the user would still be able to interact with the page while the images get loaded.

I suspect your problem is the power it takes the browser on the very slow device to process the base64 data… so trying to lazy load it from Vuex (or anything for that matter) won’t really help. The reason why it’s fast when you point to a hosted SVG is the browser is simply loading and rendering an image instead of processing base64 data to render the image.

Good point. I never thought about the processing time of the B64 value. Will make some tests now and I tell you.

In that case, what would be the solution to pre-process the svg/jpg/png image stored into the distant database to my app?
Right now I use signalR to receive data from the server. So I receive a json object that contains the B64 images. Is it possible to pre-process these b64 into images locally? The app I develop is an SPA and is “always” executing, unless when the device is rebooted. That is why I am thinking about pre-processing the received b64.

Well, the base64 data is essentially just the raw bytes that make up the image, so any sort of pre-processing, would involve saving the image as a file that can be referenced - which you’d have to do server side. You could use a dedicated service for this such as Cloudinary.

@JamesThomson Maybe I have not expressed myself correctly. I have actually followed your advice and tried to receive directly the SVGs without encoding them in b64 on the server side. It seems the rendering is faster like that. I still have to do more performance tests.
Thank you!