根据后端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" />
posted @   SKa-M  阅读(14)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示