根据后端id去请求拿取图片组件

1.组件

<template>
  <img
	:src="srcImg ? srcImg : defaultImage ? getDefaultImage : ''"
	v-bind="{ ...otheAttribute }"
	alt=""
  />
</template>

<script>
import { getFileInfoApi } from '@/api/file/index';
export default {
  name: 'imageShow',
  props: {
	fileId: {
	  type: String
	},
	defaultImage: {
	  type: String,
	  default: ''
	}
  },
  data() {
	return {
	  srcImg: '',
	  otheAttribute: {}
	};
  },
  computed: {
	getDefaultImage() {
	  return new URL(`/src/${this.defaultImage}`, import.meta.url);
	}
  },
  watch: {
	fileId: {
	  handler(newValue) {
		if (newValue && newValue != '0') {
		  this.getFileInfoApi(newValue);
		}
	  },
	  immediate: true
	}
  },
  methods: {
	async getFileInfoApi(params) {
	  try {
		const result = await getFileInfoApi({
		  id: params
		});
		if (result?.success) {
		  this.srcImg = result?.data?.url;
		  delete result?.data?.url;
		  this.otheAttribute = result?.data;
		}
	  } catch (err) {
		console.error(err);
	  }
	}
  }
};
</script>

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

2.注册

import ImageShow from '@/components/imageShow/index.vue';
app.component('ImageShow', ImageShow);

3.使用

<ImageShow :fileId="i.snapshot" defaultImage="assets/img/clientHome/data.png" />