How to display image instead of alt?

Question

JavaScript

hello, a problem has occurred, a lot of images have been deleted from the server, and links to them are displayed in the template, but alt appears instead, so is it possible to replace the alt text and the corrupted icon of the picture with some normal photo, like there is no image ..

<a href="{$details_url}"><img id="fpic{$latest[loop].id}" style="min-height: 205px !important; max-height: 205px !important;object-fit: cover;" src="{$live_site}/{$latest[loop].bigImage}" alt="{if $latest[loop].image_id}{$latest[loop].title|strip_tags:false|substr:0:100}{/if}" /></a>

Answer 1

In general, problem images can be easily traced on the client.
The only thing is that the script goes through all the pictures on the page. If there is an opportunity to hang some class on problematic pictures, in order to somehow clarify the selection, I would do just that.

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';
            });
    });
});

Answer 2

Just replace the href attribute with the desired image. If this attribute is different everywhere, then you can simply rename it to, for example, breakHref and then create an href with the desired link