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?

3 Likes

I've tried doing exactly this and it just doesn't work. This is the generated code :

                    <RadzenGridColumn TItem=".....Models......DossierFoto" Filterable="false" Sortable="false" Title="Bestand" Type="string">
                      <Template Context="....">
                        <RadzenImage Path="@(.....Bestand)" style="width: 50%">
                        </RadzenImage>
                      </Template>
                    </RadzenGridColumn>

The content is base64, but it just doesn't show as an image. In the page it just puts the base64 string in as the url, which is wrong.

<img src="/9j/4AAQSkZJRgABA......ldJt+d65alTkOyMec//9k=" style="width: 50%" class="" id="We1q4NegdE" _bl_7fdda19d-614b-4967-9fcf-b083c0aa4fca="">

It should also have "data:image/jpg;base64, " in front to ensure correct rendering. If I manually add that in the generated file it works.

I consider this as a very important use case - displaying images from byte[] in DB. Any chance to get it?

You might need to check this demo:

Oh, thank you. Pity, this page is not in google search results. Another problem: I cannot set up this code from the Radzen, only from VS editing the source code and running the app from there. Radzen kills these changes and drops the path to standard "asset" etc. Do I do smthg wrong..?

You can extend your model with additional, not mapped property that will do the conversion. As last resort you can use the application ignore list or simply switch to Radzen Blazor Studio where code editing is allowed by default.