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" />
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库