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

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

чтобы избежать "отсутствующих изображений" (красный 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();
}
13
asp.net c# language-agnostic

6 ответов

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

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

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

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

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

если missing.png loads, он будет покрывать пространство, выделенное для него, как если бы резерв не был указан. (Если она не прозрачная.)

если missing.png не удается загрузить, вместо этого пространство будет заполнено fallback.png. Вы все равно получите небольшой значок "сломанное изображение", но я предпочитаю это... небольшой намек, который говорит "исправь меня".

если ваши изображения не все одинакового размера, вы заметите, что фон плиток по умолчанию. Вы можете использовать background-repeat: no-repeat; если вы не нравится.

2

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

1

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

0

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

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

0

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

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

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

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

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

0