Image not displaying - possible bug?

Hello all!

It has been a long time since I’ve been stumped (which is awesome), but I can’t think of how else to try and resolve this issue. Hoping you can help!

Problem: The app is not displaying a dynamic image

-The formula is pulling the right URL
—I put the same formula into a text field and it showed me the complete image URL.

-The image shows up fine in another part of the app.
—That implies it’s not a problem of file type or hosting.

-Image size set to 100% width 220px height.
—The image space is there–it’s just blank white.

-Image visibility =true, as are all containers it’s in.
—The other elements in the same containers are all displaying correctly.

-I tried deleting the image element and creating a new one in case that element was somehow corrupted.
—Made no difference.

-Even when I paste the static URL into the image property, the image still does not display.

This is app #98690 on page 111 (Setup - Activities - Condensed). You can recreate it by logging in with the phone number 5072376527 pw 123456 and clicking the big ugly “test” button on the home page (technically, My Plans page). click on an activity and a bar appears at the bottom of the page with that activity’s name. Click to see details, and it will show you the details–including where the image should be.

Can you try using a Container with a background image instead of Image component directly? There has been some issues with the Image component when those are loaded dynamically.

Thanks @Tomi_Laakso! Here’s what I’ve learned:

  1. When I put in the container w/background image (sized W100% H220px, image:cover), the space is white–the picture does not show up.

  2. To make sure it was pulling the right URL, I dropped a paragraph into the container with the same formula, and suddenly the picture showed up in full!

  3. I tried having an empty paragraph, and the picture did not show.

  4. I tried having a paragraph with just a few characters in the paragraph, and enough picture showed up to cover just the width of those characters.

  5. So I went back to having the paragraph display the complete URL (because it’s so long) and made the text transparent. Now it’s displaying the whole image, so I’ll use this as my hack for now :slight_smile:

Okay, I think this is likely caused because the Container(s) around the picture get initially width (and height) that match their content when the Image hasn’t loaded yet, which makes the Container width 0px (and height 0px possibly) when you haven’t got a Paragraph within the Container.

So if you want another solution besides a transparent Paragraph, try giving the outer Container(s) width and height that can fit in the Image when it loads later on. I guess this should work, but not 100% sure still.

1 Like

Howdy! I just started using AppGyver yesterday - loving it so far! - and I came across this issue while working through the movie review sample. Interestingly, I took the same debug/tracing step of displaying the URL (actually just the poster_path) in a paragraph above the image … which had the same effect of showing the image. Ultimately wound up with the same hack for now (setting opacity to 0 for the poster_path paragraph).

Just mentioning as FYI, since new users will be particularly flummoxed by this.

Again - really amazed at this tool so far, as well as the community you’ve built. Bravo.

2 Likes

Still struggling with this too. I really need a scalable SVG to use as an icon (using material.io icons) but uploadings icons isn’t possible. So I switched to images but SVG doesn’t seem to work there and some images can be a pain to make visible.

Hmm. I think there is an issue with svgs if they are uploaded via Composer, but if you have uploaded them to some external file/image service, then they should work :thinking:

Hi! After testing, noticed that even via a link the svg doesn’t work. I’ve filed a bug report about this, thanks for reporting!

Yes, using a publicly accessible URL for the svg does work. I noticed an update to the image component just now but that does not seem to have fixed the issue.

A little more weirdness: Changing the Image Source to an external URL makes the svg show up. But changing that external url address doesn’t do anything (it retains the previous address). I had to delete the image entirely, then give that the new URL for it to work.

And another: editing the image width updates the editor preview immediately, as you’d expect, but changing the height does not update the preview until the project is saved.

Both trivial bugs but maybe a clue to something else?

1 Like

Hmm, thanks for reporting! The first one I haven’t heard of before, so I’ll try it out and report it further. The latter has been around for a while but hasn’t gotten priority to get fixed yet, as the problem disappears with a save.

Hmm, I couldn’t get the first issue you described to work. The new linked svg image appeared just fine immediately, without requiring save, and appeared correctly in preview (web, mobile has some issues) :confused: can you get that problem to reoccur for you?

I can’t get it to repeat either. Strange, I did it several times yesterday. I’ll let you know if I see it again.

1 Like