Web Viewer not displaying image

Not sure what the issue is but I suspect their is a bug with the web viewer component. I have an image stored on my WP site and added the url to web viewer.

When I run the code on my phone, the image is not loaded even when the image is accessible via normal browser and image also shows on Thunkable design page.

image

image

1 Like

Are you calling for a reload?

image

I am not using block for now but adding URL directly to component settings

1 Like

That is perhaps the point.
There is an URL, but no one is telling to actually get on line and fetch the data.

2 Likes

even this does not load image

1 Like

You seem to want to open a file, as opposed to a link.

Is the path starting with “file:” ?

No it does not because reverting back my blocks to how it was, I call the airtable spreadsheet attachment column and try to get the url value

1 Like

Would you consider getting out (through an alert, or a display of some sort) the actual text that you end up setting to VOTD Web_Viewer3 URL ?
Perhaps it is garbled?

1 Like

This is the URL output

https://dl.airtable.com/.attachments/xxxxxxxxxxxxxxxxxxxxx/0eae92b5/im1.jpg

Not sure this is helping.:

https://dl.airtable.com/.attachments/b1d8de3051cc458be6769244007b01e1/0eae92b5/im1.jpg

1 Like

But that is not an URL, this is the actual image.

Yes I want to display image using web viewer since using the image component does not work or unstable

1 Like

I have had problems showing images (animated gif) with image viewers and am now showing them as components in an HTML/JavaScript file that is the one loaded in the webviewer.
The problem here is that in X, you do not have the webviewer string that would allow sending the path for the image itself to the HTML file (I am doing that in Classic, which has a webviewer string).

I have seen some people suggesting that the X thunkable application and the HTML file could exchange information through Firebase or other, which I cannot personally vouch for never having done it myself.

One thing that perhaps could be worth trying is downloading the jpg file as a local file using a generic name, which is then referred as a static resources in the HTML file even though the content varies.

1 Like

But hold on a second here.

In the first posting that you had, is it possible that it is displaying a small corner of the overall picture, given that there are what appears to be scroll tabs on the bottom and right side?
Then you may simply have a problem of image scale.

My original design was have 2 button components side by side in a row so 2 images are displayed and when you click on each one, it displays a full image size.
Now doing this was fine but the downside was I needed to set the row height to Relative Size of about 8% while width was fill container so that I get the full image displayed with resize mode to contain. Doing this then breaks the scroll has it stops the rest of the page from showing

1 Like

Wait a second.
Do u just want to display an image through URL?

If so, Why don’t u use directly the image component?
It also has option for image url…

See this Screenshot

Thanks :smile:

1 Like

I have tried all these and this just creates a white space both at top and bottom of image and if you use absolute size, it will not fit into other phone sizes or dimensions.

1 Like

Did u do exactly as the screenshot?

Then use Relative size… (in %)

1 Like

Yes and that removes the white spaces but then using stretch as resize mode distorts the image. Using cover corrects that but the issue I have been facing with this settings since yesterday is after a while, when I try to access the advanced tab, everything goes white like its corrupt hence I have to recreate a new one which at some point same issue happens again.

1 Like