Question

我有一般的电子商务应用程序，我将ITEM_IMAGE_NAME存储在数据库中，有时管理员MISSPELL的图像名称。

为了避免“丢失图像”（IE中的红色X），每次显示产品列表时，我都会检查服务器以查找与产品相关的图像，如果该文件不存在 - 我将其替换为默认图片。

据我所知，这不会影响性能，但我想知道是否有其他方法可以修复“缺失图像”问题。

我正在使用ASP.NET + C＃（.NET 3.5）

一些代码：

foreach (Item item in Items)
{
  string path = Path.Combine("~/images/", item.categoryImage);
  item.categoryImage = File.Exists(Server.MapPath(path)) ? item.categoryImage : GetImageDependingOnItemType();
}

Answer 1

您可以考虑使用javascript

<img src="image.jpg" onerror="this.onerror=null;this.src='default.jpg'">

编辑：或者如果请求了一个不存在的图像，则编程404.aspx返回默认图像。

Answer 2

<style>
  .fallback { background-image: url("fallback.png"); }
</style>

<img class="fallback" src="missing.png" width="400" height="300">

如果missing.png加载，它将覆盖为其分配的空间，就像未指定回退一样。（假设它不透明。）

如果missing.png无法加载，则空格将填充fallback.png。你仍然会得到一个“破碎的图像”图标，但我更喜欢它......有点暗示“修复我”。

如果您的图片尺寸不同，默认情况下您会注意到背景图块。如果您不喜欢，可以使用background-repeat: no-repeat;。

Answer 3

您可以在服务器上指定对不存在的图像文件的所有请求应返回的图像。这样，用户可以获得“2 AWESUM 2 SHO”lolcat而不是红色x。

Answer 4

我喜欢Erik的解决方案，但是在第一次执行后没有删除事件，因为如果您使用该代码，比如说MVC局部视图，这将仅在第一次加载时起作用。所以我选择：

<img src="image.jpg" onerror="this.src='default.jpg';" />

如果您在相同情况下有许多图像，例如网格，则可以改为：

$("img").on("error", function () {
    $(this).attr('src', 'default.jpg');
});

当然，您可能希望使用更具体的jQuery选择器。

Answer 5

我认为你的方式非常好。我会在一个函数中执行它，或者在.categoryImage访问器中执行。

Answer 6

我想我会找到一种方法来使数据保持一致，而不是允许用户输入不一致的数据。也许您的管理应用程序可以允许管理员选择现有图像或上传新图像，然后根据此输入设置图像名称，以确保图像存在。仅在从数据库中删除对其的所有引用时删除图像。限制与您的应用程序的数据交互，以便人们不会犯这些错误。

另一种处理方法是使用处理程序（或ASP.NET MVC中的控制器）根据id执行图像查找并返回图像数据。加上缓存，这可能非常有效，并且允许您进行图像替换。

如果找不到指定的图像文件，显示默认图像的最佳方法是什么？

6 个答案: