Webviewer - HTML embedded image - path to assets / Shared folder

MIT App Inventor Help
1

What about the absolute path for content://media/external/images/media/66347 which is obtained from the activity starter?

Thanks before for your attentions

2

Use an extension FileTools, which can convert uri to file path

1 Like
3
4

Does webviewer need full path like this: file:///storage/emulated/0/Pictures/_app_inventor_image_picker/picked_image9083841617136275550.jpg?

For example:

<!DOCTYPE html>
<html style="background-color: black;">
<head>
<title>ImageView</title>
<meta name=“viewport” content=“width=device-width, initial-scale=0.86 minimum-scale=0.25”>
</head>

<body>
<img style="width: 100%; height: 96vh; object-fit: contain;" src="file:///storage/emulated/0/Pictures/_app_inventor_image_picker/picked_image9083841617136275550.jpg"/>
</body>

</html>

type or paste code here
5

You probably need a relative path from the html file to the image file (the default being that the html file and the image file are in the same directory, then you only need to use the image name), or for the image file to be served by an http server (thus having a url beginning with either http:// or https//:)

6

For my case with images sourced from the device, with the full path that I mentioned above, how do I adjust the path to the relative path for the html in assets, or: what is the full path of assets

7

Try: http://localhost/...html

8

I try for display image in webviwer, but the image does not appear while the alt text successfully appears. What is the solution?

<!DOCTYPE html> 
<html> 
<head> 
    <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> 
</head>

<body> 
<img id="imageSelect" src="" alt="" /> 
</body>

<script>
	var img = window.AppInventor.getWebViewString();
	document.getElementById("imageSelect").src = img.split(",")[0];
	document.getElementById("imageSelect").alt = img.split(",")[1]; 
</script>

</html>
9

webviewer
webviewer787Ă—367 42.6 KB

10

try to copy the html and image file to same location/folder, like ASD.

11

I am trying to display an image dynamically replaced whenever and with any image by the user, so does the copy solution seem efficient?

Second, what about calling html file from ASD?

12

why not? remember to copy to new file with same name so no need to remove the not used image.

just give the full path of html.

13

What about take picture that produced by javascript in webviewer for being placed in a component, for example: image or canvas background?

14

Sorry I do not understand what you are saying.

15

What is the full path for files stored in ASD?

16

check the File component.

17

Thanks a lot Kevinkun

18

I use the webviewer to process and manipulate images, and I return the results to components, for example Canvas Background, how do I do that?

19

One way I know is to send back the Base64 of the image by SetWebViewString(base64), then set Cavas.BackgroundImageBase64

20

Does that mean I have to convert the image from the webviewer to a Base64 Image before bringing it into the component?