How can I render a non SVG inline?

When working on a DXP maintenance page, I need the resources to all be inlined, how can I inline non SVGs?

Answer

You can use Javascript to create a Base64 version of the string in the developer console.

Create a Base64 String of the Image

IMPORTANT: This code is for developing the page, this code will not work if deployed.

var img = document.createElement('img');
img.src = "//path/to/image/";

// wait for image to load, if using this as a script for mass converting images, use img.onload for the next part.

var can = document.createElement('canvas');
var ctx = can.getContext("2d");

can.width = img.width;
can.height = img.height;
ctx.drawImage(img,0,0);

console.log(can.toDataURL()); 

Use the Base64 string as src on an img

Once you have your Base64 string, you can use it as the source attribute on your maintenance page (note it will be very very long, it is an image after all).

<img src="data:image/png;base64,iVBOR.......uQmCC" alt="Project">