hi guys, in organization chart how can i use the image as binary instead of URL in this forge component
Hello pratap,
Hope you're doing well.
Unfortunately, this forge component is only prepared to use URLs.
What you can do however is to fetch the Binary Data from the Database and convert it to a Base64 Data URL format.
Something like this should do the trick:
"data:image/jpg;base64," + BinaryToBase64(GetBinaryImage.BinaryData)
If you verify the Demo of the component (Organization Chart JS Reactive - Demo), you'll see that the implementation is exactly as described before. You can install it in here:
In the Demo:
1) The images are stored as resources, meaning it is possible to access their content (Binary Data); for your use case it's going to be the same, you just have to fetch the Binary Data from the Database instead
2) In the NodeDataItem.imgUrl field, they're passing the URL like this
Please consider to verify and replace image/jpg with the correct image type if it's different (png, jpeg...), otherwise it might not work.
It is working as expected, as you can see in here:
https://rbarradas.outsystemscloud.com/orgChartJsReactiveDemo/Home
Hope that this helps you!
Kind regards,
Rui Barradas
Hello, @pratap Kumar,
You can store images in the database as binary and consume them in the UI using a data URI (data:<mime>;base64,<data>).
Storing images in the database is convenient when you don’t have physical access to the servers (e.g., cloud hosting, third-party datacenters, stricter IT policies). Instead of managing server folders, file permissions, and asset deploys, everything is centralized and reachable through queries. This is especially handy for users who can’t access the server’s physical folders.
The expression below does exactly that: if the user has no avatar in the DB, it falls back to a default resource; otherwise it uses the stored binary.
If(
GetTeamMembers.List.Current.TeamAvatar.Avatar = NullBinary(),
"data:image/jpg;base64," + BinaryToBase64(Resources.AvatarDefault_jpg.Content),
"data:image/jpg;base64," + BinaryToBase64(GetTeamMembers.List.Current.TeamAvatar.Avatar)
)
How it works step by step:
Null check GetTeamMembers.List.Current.TeamAvatar.Avatar = NullBinary() checks whether no avatar is persisted for the current member.
No-avatar branch Builds a data URI from the default avatar (Resources.AvatarDefault_jpg.Content) converted to Base64: "data:image/jpeg;base64," + BinaryToBase64(...)
With-avatar branch Builds the same data URI, but from the DB binary (TeamAvatar.Avatar), also Base64-encoded.
Rendering in The result is a string you can assign to Image.URL/Image.Widget (or src attribute), with no physical files on the server.
Best practices:
Prefer the standard MIME image/jpeg instead of image/jpg.
If you store multiple formats (JPEG/PNG/WebP), also store the Content-Type in the DB and use it in the prefix: "data:" + ContentType + ";base64," + ....
Keeping images in the DB simplifies backups, permissions, and migrations, avoiding physical server access.
Watch out for size: large inline images can bloat page payloads. Consider resizing/compressing on upload.
You can check out the Demo link here: DEMO