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.
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:
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
While this thread goes back a few years, it currently is the top Google search result for the phrase, "outsystems binary image content not displaying".
Anyways, I had a similar issue and a solution. In my case, the image was appearing on the "List Screen" for each item in the list, but when clicking over to the "Detail Screen" for one item, the image no longer was displayed. This proves that the images are correctly stored in the DB since they do word on the "List Screen".
My theory about the "Details Screen" is that the Data Action is very complicated, taking longer to complete than the Data Action for the "List Screen". So, I thought, why not encapsulate the image into a block which has only a binary input and an Image widget. I put this image block into an IF block that only uses the image block when the Data Action was complete. Low and behold, the image works.
So looks to me like a current OutSystems bug.