【Vue】图片加载中显示Loading

最新推荐文章于 2023-12-29 17:43:29 发布

原创最新推荐文章于 2023-12-29 17:43:29 发布 · 4.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue.js #前端

vue 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种在图片加载过程中显示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'
		}
	});