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

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

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

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

Я использую ASP.NET + С# (.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();
}

ОТВЕТЫ

Ответ 1

Вы можете рассмотреть что-то с javascript

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

Изменить: или запрограммировать 404.aspx, возвращая изображение по умолчанию, если запрашивалось несуществующее изображение.

Ответ 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;, если вам это не нравится.

Ответ 3

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

Ответ 4

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

Ответ 5

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

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

Ответ 6

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

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

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

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

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