Ответ 1
Решение. Я удалил элементы высоты и ширины img, а затем обработал текст alt.
<img src="smiley.gif" alt="Smiley face" width="32" height="32" />
К
<img src="smiley.gif" alt="Smiley face" />
Спасибо всем.
У меня есть изображение на странице HTML:
<img src="smiley.gif" alt="Smiley face" width="32" height="32" />
Если изображение не найдено на сервере, он показывает уродливый пустой квадрат.
Я хочу сделать так, чтобы, если изображение не найдено, оно ничего не отобразит или другое изображение по умолчанию, которое я знаю, определенно находится на сервере.
Как это можно сделать?
Решение. Я удалил элементы высоты и ширины img, а затем обработал текст alt.
<img src="smiley.gif" alt="Smiley face" width="32" height="32" />
К
<img src="smiley.gif" alt="Smiley face" />
Спасибо всем.
Лучший способ решить вашу проблему:
<img id="currentPhoto" src="SomeImage.jpg" onerror="this.src='Default.jpg'" alt="" width="100" height="120">
onerror
это хорошая вещь для вас :)
Просто измените имя файла изображения и попробуйте сами.
Хорошо, вы можете попробовать это.
<object data="URL_TO_Default_img.png" type="image/png">
<img src="your_original_image.png" />
</object>
это сработало для меня. дайте мне знать о вас.
Хорошо, но мне нравится использовать этот способ, чтобы всякий раз, когда исходное изображение недоступно, вы можете загружать изображение по умолчанию, которое может быть вашим любимым смайликом или изображением. Извините! Недоступно, но если оба изображения отсутствуют, вы можете использовать текст для отображения. где вы также можете улыбаться. взглянуть почти на каждый случай.
<img src="path_to_original_img/img.png" alt="Sorry! Image not available at this time"
onError="this.onerror=null;this.src='<?=base_url()?>assets1/img/default.jpg';">
Вы можете отобразить альтернативный текст, добавив alt
:
<img src="my_img.png" alt="alternative text" border="0" />
Обычный способ обработки этого сценария - установить тег alt
на что-то значимое.
Если вы хотите использовать образ по умолчанию вместо этого, я предлагаю использовать серверную технологию для обслуживания ваших изображений, называемую с использованием аналогичного формата:
<img src="ImageHandler.aspx?Img=Blue.jpg" alt="I am a picture" />
В коде ImageHandler.aspx
поймайте любые ошибки, не найденные в файле, и вместо этого выполните default.jpg
.
Попробуйте использовать border=0
в теге img
, чтобы убрать уродливый квадрат.
<img src="someimage.png" border="0" alt="some alternate text" />
Я хотел скрыть пространство, занимаемое тегом <img>
, так что это сработало для меня
<img src = "source.jpg" alt = "" >
Я добавил родительский div вокруг изображения и использовал следующий обработчик события onerror, чтобы скрыть исходное изображение, потому что в IE все еще оставалось уродливое изображение, не найденное, после использования атрибута alt:
<div style=" width:300px; height:150px; float:left; margin-left:5px; margin-top:50px;">
<img src='@Url.Content("~/Images/Logo-Left.png")' onerror="this.parentElement.innerHTML = '';" />
</div>
Если вам нужно альтернативное изображение вместо текста, вы также можете использовать php:
$file="smiley.gif";
$alt_file="alt.gif";
if(file_exist($file)){
echo "<img src='".$file."' border="0" />";
}else if($alt_file){
// the alternative file too might not exist not exist
echo "<img src='".$alt_file."' border="0" />";
}else{
echo "smily face";
}
простой способ справиться с этим, просто добавьте фоновое изображение.
Здесь проверьте ниже фрагмент кода, который, В этом, я пропустил название изображения. Таким образом, именно поэтому он показывает альтернативное изображение как не найденное изображение (404.svg).
<img id="currentPhoto" src="https://appharbor.com/assets/images/stackoverflow-lgo.png" onerror="this.src='https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg'" alt="" width="100" height="150">
его работы для меня, что если вы не хотите использовать атрибут alt, если изображение разбивается, вы можете использовать этот кусок кода и соответственно установить.
<h1>
<a>
<object data="~/img/Logo.jpg" type="image/png">
Your Custom Text Here
</object>
</a>
</h1>
Этот работал для меня. используя srcset. Я только что узнал об этом, поэтому я не знаю, поддерживают ли его браузеры, но это сработало для меня. Попробуй, а потом верни мне свой корм.
<img src="smiley.gif" srcset="alternatve.gif" width="32" height="32" />