ImageUrl alternative image

[Nicolas Navier]

Hi, 

If I have the following : 

<CardHeader Title="blabla" SubTitle="test" ImageUrl="@aURL" />

Is there a way to provide the control with an alternative url if the picture is not found ?

Regards,

[Revanth Krishnan]

Hi Nicolas, 

 

Greetings from Syncfusion support. 

 

Currently, we are validating your query from our end, we will update you with further details on or before 15^th Nov 2021. We appreciate your patience till then. 

 

Regards, 

Revanth 

[Indrajith Srinivasan]

Hi Nicolas, 

 

Sorry for the delay in getting back to you, 

 

We have validated your reported query “Is there a way to provide the control with an alternative url if the picture is not found”. Yes, you can re-direct a new URL if the image is not loaded properly in the specified URL. We have prepared a sample meeting your requirements, by loading the alternate URL if the initial loaded image URL is not valid. Check the below code blocks for reference. 

 

Code blocks: 

 

 

@using Syncfusion.Blazor.Cards 

 

<SfCard ID="SecondCard"> 

    <CardHeader Title="Harrisburg Keith" SubTitle="Title" ImageUrl="@aURL" /> 

    <CardContent Content="Hi, I'm creative graphic design for print, new media based in Edenbridge" /> 

    <CardFooter> 

        <CardFooterContent> 

            <table> 

                <tr> 

                    <td> <div class="e-icons ChatIcon"></div></td> 

                    <td> <div class="e-icons StarIcon"></div></td> 

                    <td> <div class="e-icons AlarmIcon"></div></td> 

                </tr> 

            </table> 

        </CardFooterContent> 

    </CardFooter> 

</SfCard> 

 

@code { 

    //Invalid URL 

    public string aURL { get; set; } = "images/cards/football.png"; 

 

    protected override async Task OnInitializedAsync() 

    { 

        if (!(Uri.TryCreate(aURL, UriKind.Absolute, out Uri uriResult) && uriResult.Scheme == Uri.UriSchemeHttps)) 

        { 

            this.aURL = https://blazor.syncfusion.com/demos/images/cards/steven.png; 

        } 

    } 

} 

 

 

Please let us know if the solution helps, 

 

Regards, 

Indrajith 

[Nicolas Navier]

Hi,

I tried your solution and I could not get it to work, that section :
Uri.TryCreate(aURL, UriKind.Absolute, out Uri uriResult)
Works in my case even if the url returns 404

like so :

​

What could have been possible maybe is to allow for a bit of flexibility like so:

    background-image: url(https://broken_picture.jpg),url("https://via.placeholder.com/300x300?text=Failed To Load");

When setting the ImageUrl, but I don't know if that's possible ?

[Indrajith Srinivasan]

Hi Nicolas,

We are currently validating your reported query, and will get back to you with further details in two business days.

Regards,
Indrajith

[Indrajith Srinivasan]

Hi Nicolas, 

 

Good day to you, 

 

When setting the image as Https links, the Uri validator just checks the link format is valid or not. In order to achieve your requirement,  we suggest you to check the link is loading properly using the HttpClient GetAsync property. Check the below code blocks for example. 

 

Code blocks: 

 

 

@using Syncfusion.Blazor.Cards 

@using System.Net.Http; 

@using System.Threading.Tasks; 

 

<SfCard ID="SecondCard"> 

    <CardHeader Title="Harrisburg Keith" SubTitle="Title" ImageUrl="@aURL" /> 

    <CardContent Content="Hi, I'm creative graphic design for print, new media based in Edenbridge" /> 

    <CardFooter> 

        <CardFooterContent> 

            <table> 

                <tr> 

                    <td> <div class="e-icons ChatIcon"></div></td> 

                    <td> <div class="e-icons StarIcon"></div></td> 

                    <td> <div class="e-icons AlarmIcon"></div></td> 

                </tr> 

            </table> 

        </CardFooterContent> 

    </CardFooter> 

</SfCard> 

 

@code { 

    //Invalid URL 

    public string aURL { get; set; } = “https://broken_picture.jpg”; 

    public HttpClient client = new HttpClient(); 

 

    protected override async Task OnInitializedAsync() 

    { 

        try 

        { 

            HttpResponseMessage response = await client.GetAsync(aURL); 

        } 

        catch 

        { 

            this.aURL = https://blazor.syncfusion.com/demos/images/cards/steven.png; 

        } 

    } 

} 

  

Please let us know if the solution helps, 

 

Regards, 

Indrajith 

[Nicolas Navier]

That works thanks !

--Nicolas

[Indrajith Srinivasan]

Hi Nicolas,

Welcome,

Please get back to us if you need any further assistance.

Regards,
Indrajith