front-end/jdApp/src/components/app-img.vue

<template>
	<block>
		<!-- #ifdef H5 -->
		<img class="app-img" v-lazy="src" :alt="alt" :title="title" :mode="mode" />
		<!-- #endif -->
		<!-- #ifndef H5 -->
		<image 
			class="app-img" 
			:src="src" 
			:alt="alt" 
			:title="title"  
			:lazy-load="true" 
			:mode="mode" 
			:style="{height:setHeight}" ></image>
		<!-- #endif -->
	</block>
</template>

<script>
import Vue from 'vue'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
export default {
	name: 'app-img',
	props: {
		src: {
			type: String,
			default: ''
		},
		alt: {
			type: String,
			default: ''
		},
		title: {
			type: String,
			default: ''
		},
		// #ifdef MP-WEIXIN
		mode: {
			type: String,
			default: 'scaleToFill'
		},
		// #endif
		// #ifndef H5
		mode: {
			type: String,
			default: 'scaleToFill'
		},
		// #endif
		height: {
			type: [Number, String],
			default: 346
		}
	},
	computed: {
		setHeight(){
			if(typeof this.height === 'number') {
				return this.height + 'rpx'
			}else {
				return this.height
			}
		}
	},
}
</script>

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