Use the onError attribute of the IMG tag. When the image does not exist, onError is raised, which in turn specifies a logoerror.png image for img. If the image exists, logo.png is displayed. If the image does not exist, logoError.png is displayed. If logoerror. PNG also does not exist, onError will continue to be raised, causing an infinite loop and the page to freeze. Also, onError can be triggered even if the image exists but the network is not smooth. Of course, there are examples of solutions:
// Load directly
<img src=".. /.. /assets/img/timg.jpg">
// Set it to the default image displayed after logo. PNG fails to be loaded<img src="/logo.png" onerror="this.src=.. /.. /assets/img/timg.jpg"> webpack changes the path of the image <img SRC ="/logo.png" :onerror="defaultImg"> data() {return {defaultImg: 'this.src="' + require('.. /.. /assets/img/timg.jpg') + '"' } }Copy the code