Log in to AnswerLog in to Follow
UserImage.jpg
Gaius Augustus
146Views
2Comments
Images not showing in UI Reactive
Question
Reactive
Application Type
Reactive
Service Studio Version
11.14.7 (Build 58100)
Platform Version
11.13.2 (Build 32392)

I have a reactive application where I'm visualizing an image stored in a database.  The image setup appears to follow the tutorial here, but the image does not show up in the UI.  When the file is linked to (via a link or download button shown in image), the image is downloaded without issue.  

I was able to workaround the issue by changing the Type to External URL and then for the URL:

"data:application/jpeg;base64," + BinaryDataToBase64(GetImageResourcesByEmployeeUserId.List.Current.ImageResource.Image)

However, we accept any image type, and I feel like it's pretty hacky to doing nested If blocks to capture the big 3 (jpeg, gif, png), so if there's an answer to fixing this, that would be great.

Any help would be appreciated.

Setup:

In UI:

Image in Dev Tools:


Note: This application was cloned from an existing application where this works fine, and all dependencies, etc have been addressed.

0
0
25 Feb 2022

Hi Gaius,

I tried to display an image from DB the same way you did. I used pictures from both the OutSystems sample Employees module and the OutSystemsSampleDataDB module. It seems to work fine for me.

So this makes me think that the images saved into your DB are somehow not readily available to be shown in an image widget, when type 'binary' is selected. Maybe the binary file is corrupted? Have you tried using binary images that are known to work well with the image widget (e.g. from a sample DB)?

Also, what does it show when you try to open the img src url in a new tab, again a broken image?

I realized that in your developer tools screenshot, the url in the img src is somewhat different than what I have in my img src. Mine has an extra  _BinaryContent part:


1
0
26 Feb 2022

When I use a workaround converting it from binary, it works. I've tried many images and image types. All work properly when I use a workaround, but none show up.

The URL for the broken image does have _BinaryContent in the URL. I was just in the ... in the code

https://URL.com/AppName/screenservices/AppName/_BinaryContent/6JPRWXZqNUrtAF9atD5gFpgPbCrmX91xRyrsJMJ7iUex1UD9fv9cUnGWKNTZFoClQAOmrSRDWj-9FadklyyPHxW3JVCICFd5r1bP4I-qbirhvnn3eK23HkEtipSMMRsVIou7KsCMCV0syGM2coV1IFFfwvmOUXcLlv8ydPxDQ30=


My assumption based on this is that the data is being stored appropriately.

Workaround:


(1) With workaround, (2) without workaround


0
0
27 Feb 2022
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.