10

myasp.net MVC Web アプリケーション内に次のコードがあります:-

 <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)

そして、次の CSS:

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

しかし、画像が存在しない場合、各クッパは異なる方法で処理します。背景画像を設定しましたが、IE では、次のようにデフォルトの画像の上に「X」が表示されます。 ここに画像の説明を入力

src が存在しない場合にデフォルトの画像を表示する方法があれば、誰でもアドバイスできますか?

4

3 に答える 3

9

このサーバー側を処理する方がはるかに優れています。

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/";
}

次に、ビューは次のように単純化されます。

<img src="@Html.ImageOrDefault(item.ID)" />
于 2013-11-12T14:45:06.660 に答える
0

イベントリスナーを img タグに追加するなど、いくつかの js を追加してみることができます。

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

次に、画像がロードされているかどうかを確認できます。

if ($('#myimage').data('isloaded') === 'false' ) {
    // not loaded, do stuff here
    // add some replacement thumbnail
    // or set background image to the parent element
}
于 2013-11-12T14:35:29.043 に答える