ImageURL Display Issue

Hi,
I am new to Appgyver and still learning my way around the platform while working on a prototype. I have an issue with displaying imageURL in a list and hope to get someone’s help and advice.

I have some PNG images stored on external cloud storage i.e. Mediafire where it is linked to Airtable. In Appgyver, I created a data resource using REST API integration with Airtable and built a list to display the data. I could see the text data in the list but not the images. I have tried changing the image with container (as background image) components but the result is the same.

I have checked the doc and forum but couldn’t find a solution to my issue.

Thanks

Hi Leon,
Could put a screenshots for what you did, try to change the imageURL to URL or any value , and if you couldn’t bind it directly to the image source bind using formula, it could help.

Hi @Iyad_Helwani,

Many thanks for your response. I have created a separate page to show the image display issue and please see below screenshots:

I have tried changing imageURL to URL or any value as suggested but it didn’t work.

Let me know should you need more info.

Hey,
Looks like you’re not linking the image to a proper URL. What does the actual URL look like? Try copying the URL directly and paste it into the image source to test this. If nothing loads, then the issue is with your setup on the backend.

Hi @Brenton_Richards,

Thanks for your response. I tried 2 image URLs on static image component and strangely, image 1 i.e. mediafire image was blank while image 2 was fine. However, both images were blank and could not be displayed when it is in a repeated list.

Image 1 - https://www.mediafire.com/view/at2zabh1ozkpbhj/food.png/file
Image 2 - https://www.leonlimyt.com/public/food-restaurant.png

Imag 1 is not a proper image Url. Even though it ends in .png, the link does not load an image, but instead loads the website. In other words, it’s not a direct link to the image. I right clicked on the image in Image 1, but no direct link is provided.

You’ll need to rethink your structure for this one.

Hi @Brenton_Richards,
I understand image 1 may have an issue due to the file format in Mediafire but what about image 2 which ends with .png and looks legit but yet it doesn’t display the image in repeated list as well.

I have just tested the second image and it does show for me in a repeated list as well.

Simply change the “icon” property type to “text”. Or even add “Allow multiple types” and add “Web URL” and also the “image url”. This way you allow the app to choose how it interprets the url.

1 Like

The image URL type just worked for me when uploading the image statically to Appgyver hosting service.
but when using image from other sources use URL or any value type.

@Mihaly_Toth, @Iyad_Helwani,

Thanks for your response and help. I tried changing “icon” property type to “text” and also “Allow multiple types” and added “Web URL”, “URL (any)” and “image URL” as suggested but I could not bind the image source to the field “icon” as the type is incompatible. See capture image below:

There ought to be something basic I might have missed out and appreciate your pointer please.

Use the formula binding. And then input the
Repeated.current.icon there. That should solve it.

1 Like

Yup, did that too but no luck, see captured image below:

Have You tried previewing it? I have similar warnings showing up on several of my pages, but in the end it just works.

yup (see below), note that the top image is a static image which works but not in repeated list.

Okay, I feel like reading a little bit about similar issue on stackoverflow I now understand the problem.
Read here:

Also I quickly created a Mediafire account and played around with it. It seems to limit the access, for whatever reason, it could be security or even the business reasons. Oh, yess, reading about Medifaire pricing on the pricing page You can see that “Direct links” are only included in the paid plans. So You should not be able to get the direct links in a free account. But it seems to me that You can go around it.
Now I do not guarantee that this will work in the future, but for now it works.

On your mediafire file right-click it and go to download option.

It will open up your download webpage. Now go to the “Download” button and right-click that.
Then choose “Copy link address” and then save that url to Your airtable database.

This last url is a download url and I don’t know how long it valid, but for me it works now.

Also as the last step, I would definitely suggest storing Your files on Firebase storage, it is easier to get the download url and is much better integrated with Appgyver. But of course it is Your preference in the end.

Just a few screenshots:
This is my mediafire dashboard:

Choose this:

Now choose the “Copy link address”. Sorry it is in Hungarian, but on my Mac it is the second option from the bottom.

Here is the preview of a test app, that shows the image with this new url, both in single big, image and in the repeated list (sorry, I didn’t feel the need to arrange the sizes):

This is just the repeated list of objects binding to make it possible for the list to check if it shows the image:

As You can see in the url, it looks completely different from those that You have now.
Hope this will solve Your issue.

***And If You read this far. Here is a little gift. The download url of Your image and also a screenshot that it does show in the preview app:

https://download1580.mediafire.com/1iyfqzz41t6g/at2zabh1ozkpbhj/food.png

1 Like

@Mihaly_Toth,

This is great stuff! Thanks for your “research” into my issue. It seems that using Mediafire is not so straightforward and free account might not work. I will give it a go anyway to see if using free account is indeed a long term option. That is the reason I create my own site to host the icons and it might be a better option going forward as most cloud storage such as OneDrive, Google Drive have similar issue with images. I will check out the proposed solution and Firebase storage as suggested and will advise if I hit any issues :).

Hi @Mihaly_Toth,

When I use the repeated list of objects as suggested, it could only link to the same image and it is repeated in each list item, see below screenshots:

In my setup (as shown on first image), the image is set to repeated with “list of objects” and image source could only bind to single image. “List item” is also a repeated list which bind to a data variable.

1 Like

Yes, right. The way, I created the repeated list was just to show how that works. After you changed all the icons urls in Your Airtable database to the new download urls from mediafire it should work as You planned. Just return to Your repeated.current.fields.icon there

Sorry if that binding was misleading.

Just updated the icon URLs in the Airtable and reset the image source to current.fields.icon, the image is again blank in the repeated list; this is the same issue as using my other image (i.e. Image 2 - https://www.leonlimyt.com/public/food-restaurant.png) mentioned earlier.

Upon further testing, I noticed Appgyver has issues with lookup URL field (“Icon”) in Airtable while normal URL type field (“Receipt”) has no issue displaying images in repeated list (see attached image). I tested it with “Receipt” field after copying the “Icon” URLs across and bind it to the image source in repeated list and it works. This is rather strange as both URLs are identical in both “Icon” and “Receipt” fields except for the lookup (see attached image).
Are there ways to workaround this issue?