How to embed media assets on a Web Viewer?

[almeidapablo (Pablo A. Rod.)]

Hi, guys
I am suffering with a very simple thing.
I have an asset “filme.html” which I am using on a webviewer component. I want to know how to insert an image (and others media files, if it is not the same for sounds and videos) at this webviewer. The problem is: The picture is not online, it is in the assets of Kodular.
I have tried a lot of ways and none of them work. Some codes I tried to put on file.html to make it work:

<img src="lazerenatureza.png">

<img src="/lazerenatureza.png">

<img src="///lazerenatureza.png">

<img src="file:///mnt/sdcard/appinventor/assets/lazerenatureza.png">

<img src="file:///android_asset/lazerenatureza.png">

<img src="file:/lazerenatureza.png">

If some one could tell me the right way to do this I will be very thankful!

[cian]

<img src=“file:///mnt/sdcard/appinventor/assets/lazerenatureza.png”>

Should that not be – <img src=“file:///mnt/sdcard/AppInventor/assets/lazerenatureza.png”>

Notice the case difference in A and I

[almeidapablo (Pablo A. Rod.)]

I don’t rhink so because I copied it from Taifun website and app inventor website.
And I believe Kodular changes this part drom appinventor to kodular when we go to companion or export the apk.

[cian]

I am doing some testing. Stand by.

[imancol (Marlon Rodríguez)]

uh uh … I thought they were talking about metadata

[cian]

Ok something is wonky. am going to try to debug it more. I can go straight to the URL with the go to URL method, but when I embed that path or any derivative, it wont show.
After some debbugging I am seeing an error.

Not allowed to load local resource file

Looking into it more.

[almeidapablo (Pablo A. Rod.)]

Thanks for your willingness to help, man.
I really gave up trying to find out by myself. I really tried everything I could imagine and nothing worked.

Another curious thing (not that it is important since there is no reason to do it) is that if I put a media file on a web viewer URL it doesn’t work too. Probably only .htm, .html and similars extensions work on a web viewer.

[cian]

Ok so I cant figure it out either, however I have a work around. First let me show you how I got the errors.

I used this method here. It passes all the console messages to a label. Makes it easy to see the error.

Now I cant figure out how this is not working. However you can use Cloudinary as a location for your media assets. Here is an example of how to use that block as part of a simple HTML.

[imancol (Marlon Rodríguez)]

[almeidapablo (Pablo A. Rod.)]

I didn’t know this block on console message. Very interesting. Each day a new lession hehe

Your idea is good but won’t work for me.
I decided to insist on a local webviewer using images from the assets because this function is meant to work when the device is offline.

I had another idea here: Convert the picture to base64 (which is basicly text), but I am not sure it will work on web viewer. I will try later, now I am far from the computer.

[cian]

The issue is not the filetype . It is the path of it. I am going to try an APK version and change the path as Taifun suggested on his snippets.

I will try that now.

UPDATE

Same error even when set as file:///android_assets/logo.png

[almeidapablo (Pablo A. Rod.)]

We both answered the topic basically at the same time lol

I didn’t understand how your blocks can help me. I have no problem opening a normal html page using web viewer component.

My problem is when I try to show an image from the assets at this html page.

The issue is not the filetype . It is the path of it. I am going to try an APK version and change the path as Taifun suggested on his snippets.

I believe you are right, my friend. But I tried the apk version too and didn’t work. But I did it on beginning, may be one of the tests I made would work

[cian]

Still not working, so I opened a bug issue on it.

Local stored assets in Webview not displaying (AIA or APK)

Describe your issue Loaded a small png as an asset. Try to display it part of an HTML text string [image] . An error occurs. Not allowed to load local resource file. However when you use the Get URL function with the same path, it will display. I have tried every path configuration and know the path is accurate when the GetURL function works. This is both in AIA and APK. In APK I changed the path to ./android_assets/ and it still gave the same error. Nothing shows up in adb logs. S…

You might want to track it.

[almeidapablo (Pablo A. Rod.)]

Well, let’s hope Kodular staff find the correct way or solve the bug.

In the mean time, I got a work around: Convert the image to base64 using this website and insert the code generated inside the img tag, in place of the URL of the picture.
An example for who didn’t get it
To insert an image using html we do this:

<img src="http://www.website.com/picture.png">

To insert an image, we use the code generated by the website, like this:

`<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAANxSURBVEhLtVZLTBNRFD0znX6mkBi/iQvxE+NS48IACwyRaNzozsS9CdGVCxYmhIXGGDeuDMaYuNCFwRiNGoOGEBeiokDCz9qgfNICAUuhlLZ0WvoZ730z00yB0rLgLmY67917zz33814lnQQ7LPIO+xfupe0wOf1mCsMzURxW05hqroMsSRXFWDGTEy8nMBxOwaUqCC6sYk97b0UArFQRSOd0AuNhDapLhkOm6N0KViJJPPP9qwioonRJT/xwOyQoBJDPZaAtL1F4BJbKQm9rKgtUlsmtvhCQ18EtmMzq0LJ5IJMTa6CaXOv6WxZkSybpnA7Po19QVCdqqp04c0BFOpMBtAQGw6uYXtaARBqLreewl3RKyZYgtW8DGAgnoVP0ny4dwcVD1QU/fXNx1D3tE/Wp2a0i2FxbEqRkun6ENPTPxOFVSIXS0k+Ft0vv/IpRF4eM6bkYPkxSnUpISZCmzgDcXkXUgp39ia4Vufi9lBTgwkGVC5dfjW4P5N5gGFoqB5kjJaFg4Yuki0EojaCO00lF4qHM5XHz8+SmQJsyafsegup2FIZIISdTcSq4TcYiq4IhMxWnn0fBw55J6mrqvnWyAeTCxyBAQyeiM4UJJbRikGic0scb5FNiL6xPHVb/YmhrEH80je7xFVQ5DWwrJiMdOmJrtijXskJHJlWdloWF04HhqSV8nY0VARUxaXgfgMvrNIrNwdnfFPVoJCVWfDQjzILBGZaZiNnkzSo3znYUsymAPPZHEElkoFAxWdYDsdOAWZeJKLUzp8pybGZLfLM9HTd3eintVpDWUS+1+6CqjqJaWEoCkKqrxaguHvoKzgL7qilyk6tFmbaM4OiZWIN++7yRUn5c6SYjhXreVmx7qmSy0dI59Fw9Dv3GKYy0NNJChlyZVGylEnbsh06Cho5hA2Q+mcVrSpXXLPZm15BwRulpOOgVRif3V1EHGmeVMawmZ2bCc8Of1ATf/CGM0dDK7wJxMnAY6JYRva3ghBPeox+tAwtC5y7nO0vdRetsVfiTYAJwtwl3NDtdwWVII4sp/dTzMXh2uQxqphEb2gIUzpIZzht1WILOKQ/pWwh2+mxofdMp/eV6vXHH3x9aQutPuuUKfWjS3/Ai6ywVPxo2BoTpWlGtB6KtloajeNB4bHt/JEpBl1svezOWc1DJ/n9Lx1htFCJ+KwAAAABJRU5ErkJggg==">`