小程序动态图片加载失败替换本地图片

希望效果图：

前言：写一个新闻列表，一个页面里就有几十条数据，虽然分页查询，但图片有时候还会加载失败（网速、图片大小等原因）

下面说说我的思路：
我把新闻列表封装成了一个子组件，
1.在子组件标签image中放入error事件，传入index，
2.在method里调用父组件，改变当前加载失败项的imgUrl,
3.在子组件中监听props，达到将失败图片替换本地图片的目的

核心代码：

//父组件
<sonList :list="list" />

//methods
changeList(index){
	this.$nextTick(()=>{
		this.list[index].Img=null
	})
}

//子组件
<view v-for="(item, index) in List">
	<image :src="item.Img!=null ? staticfileUrl + item.Img : '../XXX/XXX/XXX.jpg'"
			mode="aspectFill" lazy-load="true" webp="true" 
			@error="imgerror($event, index)">
	</image>
</view>

<script>
	export default {
		name: 'sonList',
		props: ['list'],
		data(){
			return{
				List:[]
			}
		},
		watch: { // watch 监听 props 中的值
		    list(newVal, oldVal) { 
		      this.List = newVal
		    }
		  },
		mounted() {
			this.List=this.list
		},  
		methods: {
			imgerror(e, index) {
				this.$parent.changeList(index)
			},
		},
	};
</script>

Ps:如果你用的是this.setData()来更改list,报错undefined，大概是this指向问题。

方向对了解决起来比想象的要简单