Preview image from database field not working?

Hi
I am trying to show an image with its source taken from the db.
I can upload the image ok with the upload control and see it in the db but when I try to view the image in the grid or in the edit form it does not show.
If I inspect the element I get <img style="width:100px;" src="System.Byte[]">
I've checked the docs and seem to be doing correctly. I'm using a template for the field: where SitePic is the field in the sql db (tried both image and varbinary(max) field types)

Any ideas please.
I am running the latest version.

Not sure how the images are stored in your case however we use images in our demo database as base64 encoded strings:
https://blazor.radzen.com/datagrid

FileInput component will submit the image as base64 encoded string and the Image component can show it.

Hi
Ok for others wanting to use images from the db this may help:

  1. Ensure the db field holding the image is a string NOT a binary/image varchar(max) field will do
  2. When you auto gen your pages for add/edit pages the field will be treated as a text field, you need to delete field and replace with a FileInput control NOT a upload control. Set the Value to the the field you wish to bind to ie for my table called Project I have a picture field called SitePic so the value will be ${project.SitePic}.
  3. No need to add any image controls as they are created for you and will display the image after you upload a new one or when the page is displayed
    4.for grid views you have to add a template and manually add an Image control. Set the Path property to your field ie ${data.SitePic}. Set the width of the image as required.

I think my mistake was assuming the data field in the db would be an image/binary. Has always been for every other technology I have used in the past. Storing images as string takes up 2 times data storage so I try to avoid that. Usually have a handler of sorts to convert from the db to a url as such. Maybe passing json around has something to do with it? Anyhow after a few hours it finally works :slight_smile:

Maybe I've missed something and there is a simpler way?

1 Like