How to embed media assets on a Web Viewer?

almeidapablo · February 5, 2019, 10:06pm

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 · February 5, 2019, 11:21pm

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

Notice the case difference in A and I

almeidapablo · February 5, 2019, 11:38pm

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 · February 5, 2019, 11:48pm

I am doing some testing. Stand by.

imancol · February 6, 2019, 12:03am

uh uh … I thought they were talking about metadata

cian · February 6, 2019, 12:40am

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 · February 6, 2019, 12:51am

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 · February 6, 2019, 12:59am

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 · February 6, 2019, 1:24am

almeidapablo · February 6, 2019, 1:24am

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 · February 6, 2019, 1:25am

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 · February 6, 2019, 1:39am

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 · February 6, 2019, 1:46am

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

You might want to track it.

almeidapablo · February 6, 2019, 3:23pm

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==">`

system · March 8, 2019, 3:23pm

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.