如果图像不存在，则用 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>');
});