vue img displays a replacement image when the image is damaged

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:

Guess you like

Origin blog.csdn.net/qq_58340302/article/details/131729223