如果圖像不存在，請用div替換圖像

Question

如何正確反映圖像（如果存在）並用div替換？

// 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>)

當然，我可以單獨做XmlHttpRequest但這有很多不必要的代碼+跨域。

Answer 1

使用onerror事件捕獲所有無法加載的圖像，並用所需的<div>替換它們：

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