<template> <img v-lazy="currentSrc" :alt="alt" v-if="currentLazy" class="lazy-img" @error="onError"> <img :src="currentSrc" :alt="alt" v-else lazy="" data-src="" @error="onError"> </template> <script> import {mapState} from 'vuex'; export default { name: 'ImageFormat', props: { lazy: { type: Boolean, default: true }, src: String, width: [Number, String], height: [Number, String], mode: { type: [Number, String], default: 2 }, alt: String, interlace: Boolean }, data() { return { refresh: false, currentLazy: this.lazy }; }, watch: { src() { this.currentLazy = false; }, lazy(val) { this.currentLazy = val; } }, computed: { ...mapState(['yoho']), currentSrc() { let src = this.src; let splits = (this.src || '').split('?'); const imgName = splits[0] || ''; let query = splits[1] || ''; if (/imageView/.test(query)) { if (!/interlace/.test(query)) { src = `${src}/interlace/1`; } if (!/webp/.test(query) && this.yoho.window.supportWebp) { src = `${src}/format/webp`; } else if (!/format/.test(query) && /\.png$/i.test(imgName)) { src = `${src}/format/jpg`; } } return (src || '') .replace('http://', '//') .replace('{mode}', this.mode) .replace('{width}', this.width) .replace('{height}', this.height); } }, methods: { onError() { this.$emit('error'); } } }; </script>