How can images be used in an Angular Element

Question

I am creating an angular element which is supposed to be embedded on multiple external sites.

The embedding process will ofc just be a reference to the compiled scri

Answer 1

The best way to create a fully self-contained component is to embed the images into the component using DATA URIs.

Instead of this:

<img src="http://www.example.com/image.jpg"/>

You would encode the image file into a text format, like Base64, and then use that text data in the src attribute:

<img src="data:image/png;base64,your-base-64-encoded-image-data" />

More details here: https://www.thesitewizard.com/html-tutorial/embed-images-with-data-urls.shtml

This does increase the size of your component but it is self contained and will be portable to other apps without needing to include the image as a separate file.

SVG files are already text, but they are XML based so you only need to URL encode the file and not Base64 encode it. This produces a much smaller chunk of data.

You can run Base64 command on a *nix machine:

base64 -i "myimage.jpg"

or:

base64 -i "myimage.jpg" -o "base64.txt"

Or use an online converter:

• https://www.base64-image.de/
• https://ezgif.com/image-to-datauri