vue 片未加载显示默认片,vue判断片是否加载成功

问题

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

解决

图片加载完成前显示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.srcnewImg.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'}});