imgbox.vue

<template>
	<image :src="ImgSrc" :mode="eMode" @click="PreviewImg(ImgSrc)" @error="ErrSrc"></image>
</template>

<script>
	import {
		TanPreviewImage
	} from '@/utils/imageTools.js';
	export default {
		name:"ImgBox",
		props: {
			eImgSrc: {
				type: String,
				default: ''
			},
			eMode: {
				type: String,
				default: 'aspectFit' // 保持纵横比缩放
			},
		},
		data() {
			return {
				ImgSrc:"",
				errSrc:"/static/img/eims1.jpg" // 加载失败的占位图片
			};
		},
		watch: {
			eImgSrc: {
				handler(newVal) {
					this.ImgSrc = newVal
				},
				immediate: true
			}
		},
		methods:{
			// 预览图片
			PreviewImg(imgUrl){
				TanPreviewImage(imgUrl);
			},
			ErrSrc(e){
				console.log("图片加载失败",e)
				this.ImgSrc=this.errSrc;
			},
		}
	}
</script>

<style>
	image{
		width: 100%;
		height: 100%;
	}
</style>

imageTools.js

/* 预览图片 */
export function TanPreviewImage(imageUrl){ 
	console.log(imageUrl) // http://192.168.100.251:8990/6_1597822634094.png
	var images = [];
	images.push(imageUrl);
	console.log(images)  // ["http://192.168.100.251:8990/6_1597822634094.png"]
	uni.previewImage({ // 预览图片  图片路径必须是一个数组 => ["http://192.168.100.251:8990/6_1597822634094.png"]
		current:0,
		urls:images,
		longPressActions: {  //长按保存图片到相册
			itemList: ['保存图片'],
			success: (data)=> {
				console.log(data);
				if(data.tapIndex==0&&data.index==0){
					SaveImage(images);
				}
			},
			fail: (err)=> {
				console.log(err.errMsg);
			}
		}
	});
}
/* 保存图片 */
export function SaveImage(imageUrl){ 
	console.log(imageUrl) // http://192.168.100.251:8990/6_1597822634094.png
	uni.downloadFile({
		url: imageUrl[0], //仅为示例，并非真实的资源
		success: (res) => {
		   console.log(res)
			uni.saveImageToPhotosAlbum({  
				filePath: res.tempFilePath,  
				success: function() {  
					console.log("cg")
					uni.showToast({  
						title: "保存成功",  
						icon: "none"  
					});   
				},  
				fail: function() {  
					uni.showToast({  
						title: "保存失败",  
						icon: "none"  
					});  
				}  
			});  
		}
	});
}

使用：将原来image标签换为组件标签

<ImgBox :eImgSrc="$store.state.baseUrl+item.FilePath"></ImgBox>

eImgSrc是图片地址
eMode是图片缩放方式，参照官网进行设置image