Replace image with div if image doesn't exists

Question

how correctly reflect image if it exists & replace it with div otherwise?

// I don't know how to get `imageExists` without making cross-origin
(imageExists) ? (<img class="avatar-img" src={this.state.imageDataUrl}/>) : 
                     (<div class="avatar-img no-avatar"><span>{shortcut}</span></div>)

Of course I can do separate XmlHttpRequest but that's lots of unnecessary code + cross-origin.

Answer 1

Use the onerror event to catch all images that failed to load and replace them with the <div> you want:

$('img').on('error', function() { 
    $(this).replaceWith('<div class="avatar-img no-avatar"><span>{shortcut}</span></div>');
});