How to showcase local Images/SVG file in Custom Widgets?

When working with custom widgets, you may encounter an issue when trying to showcase the local Image/SVG files in custom widgets. This can be resolved by converting the Image/SVG file into base64 format or taking the online link for the respective image and passing the base64 data/image URL value into the image tag src attribute to showcase the respective image in a custom widget.

Follow the below steps to showcase the local image/SVG file in custom widgets.

1. Convert your SVG file into base64 format/take the online link for the respective image.

2. Once you have the base64 value/image URL, you can pass it into the image tag src attribute. Here is a sample code below.

<img src="data:image/image/png;base64,iVBORw0KGgo…” />

<img src="https://th.bing.com/th/id/OIP.654Cb6S2_ckROfe3jDgaaQAAAA...” />

This workaround allows you to render local images/SVG files in custom widgets without any issues. We have also created the sample custom widget for your reference you can download the custom widget in the link.