Image Component via URL

Hi All

What I have is a dynamic image that I can change manually (it is an image on a banner-type page and won’t change regularly) by going into a table in my backend (backendless…) and changing the ‘page’ field in the table to ‘Intro’ for the record that holds the image details. This means that the URL which is used as the source for the image component changes (as the URL formula looks for ‘intro’ in the table to construct the URL…).

URL(JOIN([“https://eu.backendlessappcontent.com/**************/images/”, FIND(data.BannerImage, item.Page == “Intro”).Image,".jpg"],""))

Anyway, this works. But what is blowing my mind is that the image in preview mode is only showing on one Android phone, and not another (a smaller screened one).

Depending on how I set it up to display, it is sometimes there because I also have a URL attached to the image on ‘component tap’, so if the image is clicked, a webpage will open.
The image is there, but not visible…on the smaller phone if I used the below;

If I set it to 90% like below, on the smaller phone no link will open so the image is seemingly both not displaying and is not clickable;

The size of the image I am testing is 3840 = width and 2460 = height.
For the px values above, they are within the width and height size of the smaller phone.

Totally stumped!?
Thanks
Paul

@Mevi Hey, could you possibly help? Spent another few hours trying to figure it out and cannot solve it. I now have a put a border on the image component set at actual size with width = 320 and height = 205. I see image in the border on the larger Galaxy Note phone but only the border on the normal galaxy phone.
I also made the actual image that same size…

If I change ‘width & height’ to ‘fit to content’, in the smaller phone I no longer see the border, just the top line…indicating that nothing is pulling through.

Any suggestions greatly appreciated.
Thanks
Paul

Sure, I’ll try :slight_smile:

Sounds very odd :thinking: Dynamic images can be a bit tricky. I’d try a few things, maybe some of these help:

  1. Set the URL of the image into an app variable that you set on app launch, so that the url is “ready” before you even open the page and see if that helps
  2. Try using a static url (=without formula) and see if that makes a difference on how the image shows on the devices, if not, try uploading an image in Composer and displaying it in the app and see if that makes a difference
  3. Try showing the image only after page is opened (put visibility to false and then to true when page is focused for example) and see if that makes a difference

In general I would recommend using a static height (pixels) instead of percentage height, or just basic grow to width while trying these out.

1 Like

Thanks Mevi

No success as yet.

  1. I couldn’t get this to work as the formula when set as a variable (tried both page and app…) refuses to pull through the FIND part of the source

JOIN([“https://eu.backendlessappcontent.com/DE9--------------------9D23955C8300/console/ebyezazxcmyzadhwxptbeequjvegktegwwen/files/view/images/”, FIND(data.BannerImage, item.Page == “Intro”).Image,".jpg"],"")

  1. just showed the full border but no image
  2. not sure how to build the formula for that.

Is it normal that a component’s behaviour would vary across two different Android phones?

Thanks
Paul

It doesn’t happen often for us, but Android is notorious for being super fragmented and that causing a lot of issues in a lot of app programming for Android, so I’m not surprised we run into that occasionally.

2.So you tried just having the static url without any formula and that would not work either? Nor even if you uploaded the image in Composer? Then I doubt any of the other stuff will help. If no image in any situation will appear on that phone in your app, even if you upload in Composer, then something is seriously screwed. What about the default preview image https://s3.amazonaws.com/appgyver.assets/composer3/images/image_placeholder.png ? does that appear on the smaller device?

1.That formula would not work until you have that data.BannerImage populated, so you need to move the request for getting that data into app launch (and store it in a data variable or app variable) so you can do that.

3.Go to the image component, set its visibility to be bound to a page variable, set that to be false by default, then go to page focused event, set the page variable to true there.

1 Like

Hello Again!

Mevi - One critical piece of info I somehow forgot about…this is also happening on an iphone…i am looking at three phones and the two smaller ones (iphone7 and galaxy S6) display no image in the image component…

  1. So I got it to display on all 3 phones by uploading the image to composer…so no problem there.

  2. Formula on image component visibility = IF(pageVars.Visible == true,true,false) and

No joy here…

  1. Cannot get this working as a page variable which is set on focus…nothing shows on the good phone!

Going back to what I originally had, these validation warnings are not important are they?

Going to bed :slight_smile:

.

Those warnings should be fine.

Hmm. :thinking: What about when you open the page in our web preview? What happens then?

Can you check if there are any errors when the image doesn’t show up? If it doesn’t show up, you can just use your browser’s developer console to see any errors. For Android/iOS, use our debugger.

Hey Mevi

I sorted this and I have no idea how really…i re did everything from the start and it now works. Thanks for your help!!!

Happy but very confused…

1 Like