Javascript - заменить сломанное изображение по тексту (div; css class)

75
7

Я пытаюсь заменить все сломанное изображение на JS. Я использую этот код для замены всех сломанных изображений с помощью изображения notfound.png.

    $(document).ready(function() {
$('img').attr('onError', 'this.src="notfound.png"');
});

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

Я хотел бы использовать это для текстовой части:

Текст для показа...

EDIT: Хорошо, я нашел, что это решение работает нормально, но не принимает класс CSS

<script type="text/javascript">
$(document).ready(function() {
$('.post_body img').one('error', function() {
$(this).replaceWith('<div>Image not found (error 404)</div>').addClass('error404');
});
});
</script>

В любом случае, поскольку я написал CSS-класс, не добавляется, поэтому это решение не является полным :(

CSS будет:

.error404 {
display: block;
color: #667d99;
font-weight: bold;
font-size: 11px;
border: 1px dotted;
border-radius: 3px;
padding: 5px;
margin: 10px;
background: #e7edf3;
text-aling: center;
}

спросил(а) 2021-01-19T15:42:57+03:00 2 месяца, 3 недели назад
1
Решение
62

Вы можете создать текстовый узел и добавить его к родительскому img и, при необходимости, удалить img. Этот код входит в обработчик error для img


$('img').on('error', function(){
$(this).parent().append($('<div>Broken image</div>'));
$(this).remove();
})

ответил(а) 2021-01-19T15:42:57+03:00 2 месяца, 3 недели назад
44

Хорошо, я думаю, что нашел решение для вас. Я попытался использовать функцию jQuery error. Это помогло мне:

Чтобы заменить все недостающие изображения на другое, вы можете обновить атрибут src внутри обратного вызова, переданного в.error(). Убедитесь, что изображение замены существует; иначе событие ошибки будет запущено на неопределенный срок.

В вашем примере это было бы лучше:

$('img').each(function() {
var img = $(this);

img.error(function() {
img.replaceWith('<div class="error404">Image not found (error 404)</div>');
}).attr('src', img.attr('src'));
});

Я также сделал для вас пример jsFiddle, который отлично работает для меня.

ответил(а) 2021-01-19T15:42:57+03:00 2 месяца, 3 недели назад
44

Вы можете изменить alt, если ошибка вызывается так же, как вы делаете с изображением.

function imgMissing(image) {
image.onerror = "";
image.alt = "Image not Found";
return true;
}

HTML:

    <img src="image.jpg" onerror="imgMissing(this);" >

ответил(а) 2021-01-19T15:42:57+03:00 2 месяца, 3 недели назад
44

Если вам действительно нужно использовать javascript для этой попытки

$(document).ready(function() {
$('img').attr('alt', 'Alternative text');
});

Но то же самое можно добиться с помощью barebone HTML

<img src="path/to/image.jpg" alt="Alternative text">

ответил(а) 2021-01-19T15:42:57+03:00 2 месяца, 3 недели назад
44

EDIT: Хорошо, я нашел, что это решение работает нормально:

<script type="text/javascript">
$(document).ready(function() {
$('.post_body img').one('error', function() {
$(this).replaceWith('<div>Image not found (error 404)</div>');
});
});
</script>

В любом случае, еще один думаю, мне нужно добавить CSS-класс "error404" для этого "div", как это сделать в JS? Большое спасибо!

CSS будет:

.error404 {
display: block;
color: #667d99;
font-weight: bold;
font-size: 11px;
border: 1px dotted;
border-radius: 3px;
padding: 5px;
margin: 10px;
background: #e7edf3;
}

ответил(а) 2021-01-19T15:42:57+03:00 2 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема