Scenario: When the image address cannot be found, it will be displayed as shown in Figure 1; although it has no big impact, it is a bit ugly. The requirement is to display a replacement image when the image is damaged, as shown in Figure 2.
Code implementation: Add @error event to img tag
<img :src="item.imageUrl" :alt="item.imageName" @error="e => {e.target.src = '你的替补图片地址'}">
My overall code is as follows: