Embedding an image in

🚀 Support (Q&A)
1

Hi!

My app has a WebView that I’m using as a FAQ, and I’m trying to embed an image in the HTML-code that the WebResult returns in order to clarify some things for the user.

I placed the image in my app-folder and tried to access it using a relative path to the image in the <img src=...> tag, but that didn’t work. After inspecting it in the browser I found that using this relative path causes the app to look on viktor-storage.s3.amazonaws.com, so when trying to look for e.g. the image ./test.png it will end up looking for viktor-storage.s3.amazonaws.com/test.png which obiously doesn’t exist.

Is there a way to embed the image without the need to self-host the image?

2

Hi Martijn,

I think you could embed your image directly in the html by encoding it as base64. Based on this link your html code would look as follows:

<img src="data:image/png;base64,FILLYOURIMAGEASBASE64HERE" alt="Red dot" />

to encode your image as base64 you can use this code:

import base64  # this is not a package, but should be included by default, like math

with open(image_path, "rb") as file:
     image_as_base64_string = base64.b64encode(img_file.read()).decode('utf-8')

kind regards,
Paulien