The image tag does not support displaying the default image if the image fails to load

The image tag does not support displaying the default image if the image fails to load

Official documents through train

Here’s what I have in mind so far:

Use the two image tags, isShow, for control, and use the onError method: this method controls the display of the default image code when the image load fails

<template> <div> <div class="wrap"> <image if="isShow" onerror="onImageError()" class="banner" src="111.png" ></image> <image if="! isShow" class="banner" src="{{errorImageUrl}}"></image> </div> </div> </template> <script> export default { private: { isShow: true, errorImageUrl: "'}, onImageError() { this.isShow = false this.errorImageUrl = ` https://img1.baidu.com/it/u=4090369061, 1994957220 & FM = 26 & FMT = auto&gp = 0., JPG `}}; </script> <style lang="scss" > .wrap { flex-direction: column; } .banner { height: 381px; width: 450px; } </style>Copy the code

1. Events support common events