uniapp image 二次封装 图片loading 无效路径图片 空地址处理

本文主要是介绍uniapp image 二次封装 图片loading 无效路径图片 空地址处理，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<template>

    <view :class="canPreview ? 'customImg' : 'customImg isloading'">

        <image :src="image" :mode="mode" fade-show lazy-load :class="iclass" @error="onImageError" @load="onImageLoad"
        @tap="tap?tap():preview(image)"
            >
        </image>
    </view>

</template>

<script>
export default {
    props: {
        // 事件
        tap:{
              type: Function,
              default:null
        },
        //图片前缀
        preFix: {
            type: String,
            default: process.uniEnv.imgPreFix
        },
        src: {
            type: String,
            default: ''
        },
        //样式class
        iclass: {
            type: String,
            default: ''
        },
        mode: {
            type: String,
            default: 'aspectFill'
        }
    },
    data() {
        return {
            image: '',
            canPreview: false,
            noImage: require("@/static/images/noImage.jpg")
        }
    },
    watch: {
        src: {
            handler(val) {
                if (val) {
                    // this.preFix+val
                    this.image = val
                } else {
                    console.log('空地址');
                    this.image = this.noImage
                }
            },
            immediate: true
        }
    },
    methods: {
        onImageLoad() {
            this.canPreview = true

        },
        onImageError() {
            console.log('无效路径图片');
            this.image = this.noImage
        },
        preview(e) {

            if (this.canPreview) {
                let array = [];
                array.push(e);
                uni.previewImage({
                    urls: array,
                    current: array[0]
                });
            }
        }

    }
}
</script>

<style lang="scss" scoped>
.customImg {
    display: inline-block;
}
.isloading {
    background: url("@/static/images/loading2.gif") no-repeat center;
    background-size: 100%;
}
</style>

<template>
  <view style="width:10px;height:50px">
    <customImg :src="require('@/static/images/success.png')" iclass="image-small" :tap="cc"></customImg>
    <text>11</text>
  </view>
</template>

<script>
import customImg from './test.vue'
export default {
  components: { customImg },
  data() {
    return {}
  },
  methods: {
    cc(){
      console.log(455454);
    }

  }

}
</script>

<style lang="scss" scoped>
</style>

这篇关于uniapp image 二次封装 图片loading 无效路径图片 空地址处理的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！