Preview image from database field not working?

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:

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

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