В целом, легко можно отследить на клиенте проблемные картинки.
Единственное, скрипт перебирает все картинки на странице. Если есть возможность на проблемные картинки навесить какой-то класс, чтобы как-то уточнить выборку я бы так и сделал.
const checkImagePromise = ( url ) => new Promise( (resolve, reject ) => {
let img = new Image();
img.addEventListener('load', resolve );
img.addEventListener('error', reject );
img.src = url;
});
document.addEventListener('DOMContentLoaded', () => {
// Вот тут выбираем все картинки в документе. Этот селектор можно уточнить
let images = document.querySelectorAll('img');
images.forEach( img => {
checkImagePromise( img.src )
.then( res => {
// С картинкой все ок - ничего не делаем
})
.catch( error => {
// С картинкой ошибка - ставим заглушку
img.src = 'refreshing.svg';
});
});
});
Простой