Is it possible to load a Base64 encoded image as a background-image: url("...") but not expose the actual encoded string in the page source?
For instance, I have a Node API that when we GET request at "/image" it returns the serialised Base64 data.
res.json("data:image/gif;base64,R0lGODlhPQBEAPeoAJosM//Aw.....blah blah
Is it possible to load this on the frontend as a URL only? So the background-image displays the URL ONLY and the actual Base64 encoded text is not exposed in the frontend page source.
So if you right click and go to inspect it displays this:
.my-image {
background-image: url("http://exampleapi.net:8080/image");
}
But not this:
.my-image {
background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD.... etc.
}
Yes it is but not like that, since you are fetching only the base64 the server is not "serving" the file as static content, but in client-side a base64 can be converted into blob and generate and friendly URI if that works for you.
const base64ToBlobUrl = async (base64Data) => {
const base64Response = await fetch(base64Data);
const blob = await base64Response.blob();
const blobUrl = window.URL.createObjectURL(blob);
return blobUrl;
}
This function will return a URI you can use in the <img> tag or in an in-line CSS background.