Comment afficher une image par défaut dans le cas où la source n'existe pas

J'ai le code suivant à l'intérieur myasp.net application web MVC:-

 <a href="~/Content/uploads/@(item.ID).png"><img class="thumbnailimag" src="~/Content/uploads/@(item.ID).png"  /></a>   @Html.ActionLink(item.Name,"Details","DataCenter", new{id = item.ID},null)

Et le code CSS suivant:

.thumbnailimag {
    width:30px;
    height:30px;
    border:thin blue;
    background-image:url("/Content/uploads/virtual-data-center.jpg");
}

Mais si l'image n'existe pas, chaque bowser va les traiter différemment . J'ai mis une image de fond, mais encore sur IE, il affiche un “X” sur l'image par défaut , comme suit:-
Comment afficher une image par défaut dans le cas où la source n'existe pas

Peut à quiconque des conseils si il y a un moyen d'afficher une image par défaut si la src n'existe pas?

source d'informationauteur John John

  1. 7

    Il est beaucoup mieux de gérer ce côté serveur:

    public static class HtmlHelperExtensions
{
    public static string ImageOrDefault(this HtmlHelper helper, string filename)
    {
        var imagePath = uploadsDirectory + filename + ".png";
        var imageSrc = File.Exists(HttpContext.Current.Server.MapPath(imagePath))
                           ? imagePath : defaultImage;

        return imageSrc;
    }

    private static string defaultImage = "/Content/DefaultImage.png";
    private static string uploadsDirectory = "/Content/uploads/";
}

    Ensuite votre point de vue est simplifiée:

    <img src="@Html.ImageOrDefault(item.ID)" />
  2. 23

    Sûr de vous, par vos images à utiliser:

    <img src="fails/to/load.png" onerror="this.src='path/to/replacement/image.jpg'" />

    Il n'y a pas une solution en CSS, il aura besoin de JS pour être appliquée à chaque <img> balise ou un haut niveau de gestionnaire de remplacer le onerror cas pour toutes les images.

  3. 0

    Vous pouvez essayer d'ajouter un peu de js, par exemple, ajouter un écouteur d'événement pour la balise img: 

    <img id="something" data-isloaded="false" onload="$(this).data('isloaded', 'true')" />

    Ensuite, vous pouvez vérifier si l'image est chargée: 

    if ($('#myimage').data('isloaded') === 'false' ) {
    //not loaded, do stuff here
    //add some replacement thumbnail
    //or set background image to the parent element
}