CardHeader ImageUrl

Question

Is there a way to supply the base 64 byte data instead of the url for the image?

Something like <CardHeader ImageSrc="data:image;base64, ......">

The reason for this is that I have my image stored in a database and not in a file.

Thanks,

Frank

Balasubramanian Sattanathan · Accepted Answer

Hi Frank,

Thanks for the update.

We have validated your reported problem at our end and let you know that you have provided space after the comma(,) due to this, the image is not displayed in the DOM. We have corrected the base64 string as shown below. So we would suggest you to use the below string in your project to display the image

Card Content

</CardContent>

</SfCard>

Modified project: https://www.syncfusion.com/downloads/support/forum/160643/ze/DemoOfProblem836447228.zip

Kindly try the above solution and let us know if this is helpful.

Regards,

Balasubramanian S

Balasubramanian Sattanathan · Answer

Hi Frank, Greetings from Syncfusion Support. We have validated your requirement at our end and let you know that we can achieve by making use of the below code snippet. And also we let you know that the property ImageSrc has been deprecated at our end and we can use it as ImageUrl.

@code{ string CardSubTitle = "@harrisburg_keith"; string base64 = Convert.ToBase64String(Model.ByteArray); string CardImage = String.Format("data:image/gif;base64,{0}", base64); } Reference link: https://stackoverflow.com/questions/17952514/asp-net-mvc-how-to-display-a-byte-array-image-from-model Kindly try the above solution and let us know if you need further assistance. Regards, Balasubramanian S

Frank · Answer

Thanks for your response.That solution did not work for me.  The url for the image seems to be correct but the image is not displayed.Below is a screen shot from the browser tools.  Note that for some reason the image data in the rightmost panel is show crossed-out.  This may be a clue?I hope you can determine what is wrong. Thanks again for your help,Frank

Balasubramanian Sattanathan · Answer

Hi Frank,

Thanks for the reply.

We have analyzed your shared details and prepared a sample based on that for your reference which can be downloaded from the below link. In the below sample, the card header will be displayed without an image on initial loading. Once the image has been added through the uploader, the uploaded image will be placed to the card header like the below screenshot. Here, the card image is the base64 byte data, not an URL. So we would suggest you to refer and follow the below sample.

string CardImage = "";

public async Task onChange(UploadChangeEventArgs args)

{

files = new List<fileInfo>();

this.selectedFiles = args.Files;

foreach (var file in args.Files)

{

var pathToSave = Path.Combine(Directory.GetCurrentDirectory(), "Images");

var fullPath = Path.Combine(pathToSave, file.FileInfo.Name);

byte[] bytes = file.Stream.ToArray();

string base64 = Convert.ToBase64String(bytes);

CardImage = String.Format("data:image/gif;base64,{0}", base64);

files.Add(new fileInfo() { Path = @"data:image/" + file.FileInfo.Type + ";base64," + base64, Name = file.FileInfo.Name, Size = file.FileInfo.Size });

content = new MultipartFormDataContent {

{ new ByteArrayContent(file.Stream.GetBuffer()), "\"upload\"", file.FileInfo.Name }

};

filepath = await Http.PostAsync("https://localhost:44395/api/SampleData/Save", content);

}

Screenshot:

Sample: https://www.syncfusion.com/downloads/support/forum/160643/ze/CoreHostedFileUpload_with_card_image882228768.zip

Kindly refer to the above solution and let us know if you need further assistance.

Regards,

Balasubramanian S

Frank · Answer

Sorry for taking so long to get back to you. Below (sorry it is so messy) is a that contains an ImageUrl="data:image;base64 .....After that is a plain HTML tag with the src=data:image;base64 ..... Exactly the same base64 series of bytes as for the ImageUrl in the The image in the CardHeader is not displayed. The exact same image in the

is displayed correctly.If you can make sense of what I am saying, I think this demonstrates that the

Balasubramanian Sattanathan · Answer

Hi Frank, 

Thanks for the reply. 

As we mentioned in our last update, we can use base64 byte data to the ImageUrl. Since it is working properly at our end. So we would suggest you to check your base64 data whether it has generated properly or not. And if the problem is not resolved at your end, kindly share the issue reproduced sample to provide a prompt solution. 

Regards, 
Balasubramanian S

Frank · Answer

I have provided you (attached) with sample code that demonstrates the error.Regards,FrankAttachment: DemoOfProblem_cb2e8dc5.zip

Balasubramanian Sattanathan · Answer

Hi Frank,

Thanks for the update.

We have validated your reported problem at our end and let you know that you have provided space after the comma(,) due to this, the image is not displayed in the DOM. We have corrected the base64 string as shown below. So we would suggest you to use the below string in your project to display the image

Card Content

</CardContent>

</SfCard>

Modified project: https://www.syncfusion.com/downloads/support/forum/160643/ze/DemoOfProblem836447228.zip

Kindly try the above solution and let us know if this is helpful.

Regards,

Balasubramanian S

Frank · Answer

Thank you for your response.Here is what I can say definitively1.  There is no need to specify the file type - the following works fine "ImageUrl="data:image;base64,iVBORw0KGgoAAAANSUhEUgAAARAAAABcCAYAAA...2.  There is no problem using a .png file. Files of type .png work3.  There is a problem using jpg files.  Files of type .jpg do not workThe example I provided you shows the problem using a jpg file.  It is reproducible.Regards,Frank

Frank · Answer

Hello,Yes, you are correct.  This was entirely my sloppy error. I apologize and I thank you very much.Regards,Frank

Nevitha Ravi · Answer

Hi Frank, 

Thanks for your update. 

We are happy that your issue has been resolved, please get back to us if you need any further assistance. 

Regards, 
Nevitha