Лучший способ отобразить изображение по умолчанию, если указанный файл изображения не найден?

Question

У меня есть обычное приложение электронной коммерции, я сохраняю ITEM_IMAGE_NAME в базе данных, а иногда и менеджеры MISSPELL имя изображения.

Чтобы избежать «отсутствующих изображений» (красный X в IE), каждый раз, когда я отображаю список продуктов, я проверяю на сервере изображение, связанное с продуктом, и, если этот файл не существует, я заменяю его на изображение по умолчанию.

Насколько я могу судить, это не влияет на производительность, но мне было интересно , есть ли какие-либо альтернативы для устранения проблемы "отсутствующего изображения".

Я использую 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

Мне нравится решение Эрика, но без удаления события после первого выполнения, потому что если вы используете этот код, скажем, в частичном представлении MVC, это будет работать только при первой загрузке. Так что я бы пошел с:

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

Если у вас много изображений в одной ситуации, например, в виде сетки, вы можете сделать это вместо этого:

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

Конечно, вы можете использовать более конкретный селектор jQuery.

Answer 4

Вы можете указать на сервере, какое изображение должно возвращаться для всех запросов к несуществующим файлам изображений. Таким образом, пользователь может получить lolcat "2 AWESUM 2 SHO" вместо красного x.

Answer 5

Я думаю, что я нашел бы способ сделать данные непротиворечивыми, вместо того, чтобы позволить пользователям вводить противоречивые данные. Возможно, ваше приложение управления может позволить менеджеру выбрать существующее изображение или загрузить новое, а затем задать имя изображения на основе этого ввода, чтобы вы были уверены, что изображение будет существовать. Удалите изображение только тогда, когда все ссылки на него были удалены из базы данных. Ограничьте взаимодействие с данными в своем приложении, чтобы люди не могли совершать подобные ошибки.

Еще один способ справиться с этим - иметь обработчик (или контроллер в ASP.NET MVC), который выполняет поиск изображения на основе идентификатора и возвращает данные изображения. В сочетании с кэшированием это может быть очень эффективным и позволит вам также выполнять замену изображений.

Answer 6

Я думаю, у тебя все в порядке. Я бы сделал это в функции или в .categoryImage accessor.