Setting CardImage's ImageURI from database

[Patrick]

I particularly have a problem setting the URI path in the CardImage component. It doesn't show the image whether I use the relative or absolute paths. The logic stores images both at the database (full path including the domain e.g "https://localhost:7198\Photos\99c64342-3843-45cc-baf4-6df397a3cf8d.jpg ") and at the Server project's webroot path where I only store the image name ("99c64342-3843-45cc-baf4-6df397a3cf8d.jpg"). Now, since I render images on the Client, I am unable to access the Server's wwwroot. With SGrid it's fine, it's able to render the database images straight from the database to the SfGrid, but the Card. It's not. Help on how I can achieve this. Pssst. Bootstrap Cards are working fine, but I wanna use the SfCard. Thank you.

[Vinitha Jeyakumar]

Hi Patrick, 

 

 

Greetings from Syncfusion support, 

 

 

You can achieve your requirement by converting the image byte arrays which you get from your database into base64 strings. Please check the code below, 

 

Code snippet: 

<div class="control-section"> 

    <div class="row"> 

        <div class="col-lg-6 col-md-6"> 

            <SfCard ID="SideCard"> 

                <CardImage Image="@imagesrc" /> 

                <CardHeader Title="Debunking Five Data Science Myths" /> 

                <CardContent Content="Tech evangelists are currently pounding their pulpits about all things AI, machine learning, analytics—anything that sounds" /> 

                <CardFooter> 

                    <CardFooterContent> 

                        <SfButton CssClass="e-btn e-outline e-primary">Read More</SfButton> 

                    </CardFooterContent> 

                </CardFooter> 

            </SfCard> 

        </div> 

    </div> 

</div> 

@code { 

    protected override void OnInitialized() 

    {     

        // here you can use your stored image bytes 

        var base64String = Convert.ToBase64String(bytes, 0, bytes.Length); // Convert the bytes to base64 string   

        string imagesrc = "data:image/png;base64," + base64String; 

    } 

} 

 

Regards, 

Vinitha 

[Patrick]

Thank you, it worked :)

[Vinitha Jeyakumar]

Hi Patrick,

You are welcome. Please get back to us if you need any further assistance,

Regards,

Vinitha