【Vue】图片加载中显示Loading

问题

加载图片列表式，渲染缓慢，影响体验

解决

图片加载完成前显示loading，图片加载错误显示错误图片

<template>
	<view>
		< :src="url"></img>
	</view>
</template>

<script>
	export default {
		name: 'myImage',
		props: {
			src: {
				type: String,
			},
		},
		data() {
			return {
				url: 'http://img3.imgtn.bdimg.com/it/u=2589092856,2835529999&fm=26&gp=0.jpg' // 先加载loading.gif
			};
		},
		mounted() {
			var newImg = new Image()
			newImg.src = this.src
			newImg.onerror = () => { // 图片加载错误图片
				newImg.src =
					'http://bpic.588ku.com/element_origin_min_pic/01/37/82/88573c6372e4ae5.jpg'
			}
			newImg.onload = () => { // 图片加载成功后
				this.url = newImg.src
			}

		}
	}
</script>

引用

<myImage :src="imageSrc"></myImage>

后续问题

发现以上方法在H5中可以，小程序或者App报错，解决方法：利用框架自带getImageInfo方法，举例uni.getImageInfo

uni.getImageInfo({
		src: that.src,
		success: function(image) {
			that.url =that.src
		},
		fail: function(err) {
			that.url = 'http://bpic.588ku.com/element_origin_min_pic/01/37/82/88573c6372e4ae5.jpg'
		}
	});