Image Component Render Problem

  • Goal: Rendering this Image using the image component with the Fixed Height and Contain Width options.

  • Steps: I tried different images and they worked, but I don't understand why this image doesn't render correctly.

  • Details: It works fine with the auto height scaling option, but it doesn't render with fixed height option.

  • Screenshots:

  • App json export:

Hi @Halis_Bal,

I'm seeing the same issue :thinking: I'll file this as a bug for our team to fix.

As a workaround, it seems like it works to trigger a Rest query to that image url and then put the query's base64 data into the image source instead:

:thinking: Not sure if anything changed on your side, but this is now working for me with either approach - let me know if you're still seeing issues

Hi @Tess , thank you for your alternative solution! I still have the rendering problem while using the URL directly. Note: problem occurs only when I use Fixed Height with Contain Width options.

Here is a screenshot I just have taken.

Interesting - not sure how it randomly started working for me :thinking: In any case, I'll still report this as a bug. The alternative solution works for the time being?

Yes, triggering a Rest Query and using its base64 data works perfectly fine. Interestingly, after I tried with the rest query solution, the problem is also fixed in my test application (Maybe because of the cache, idk). Now I can see the images without any problem in that app. But I am sure there is a bug somewhere, because in my main application, problem still continues. I have this image components within a gridview component, still one image doesn't render correctly which is the image I shared with you initially.

1 Like

Hey @Tess,

I'm still experiencing this issue, and the solution you proposed isn't ideal since it has a significant impact on the app's performance.

Are there any updates on the fix for this bug?

1 Like

Hi @Simon_Damiaens,

Thanks for checking in! I don't have a bug fix yet. Can you check if the image url has an extra space at the end of it? That is one edge case where we've been able to reproduce this issue - and removing the trailing space has resolved it

Hi @Tess

Your fix got me thinking! I checked and noticed that my URL actually had spaces—not at the end, but right in the middle. I resolved the issue by removing all spaces from the URL segment causing the trouble, specifically by wrapping it in encodeURIComponent() for the .jpg path. That completely solved the bug in my case. Thanks for the inspiration!

2 Likes

Hi @Simon_Damiaens Thank you so much! This method also solved my issue. On my side, I guess not spaces but Turkish characters in the URL was causing the issue. When I use encodeURIComponent method, it worked perfectly.

1 Like


1 Like