<template>
|
<!-- 实物图 -->
|
<div style="position: relative; height: 100%">
|
<viewer :images="state.currentimageList" :options="state.OptionssalseImg" class="imgBox">
|
<img :onerror="useDefaultImage" v-for="src in state.currentimageList" :key="src" :src="src"
|
style="max-width: 100%; max-height: 100%; height: auto; width: auto" />
|
</viewer>
|
<span v-if="state.isDebug" style="
|
z-index: 1000;
|
position: absolute;
|
bottom: 0.02rem;
|
left: 0rem;
|
opacity: 0.4;
|
">{{ state.currentimageList[0] }}</span>
|
</div>
|
</template>
|
|
<script setup name="pictureComponent">
|
import { reactive, watch, onMounted, toRefs } from 'vue'
|
import defaultImgUrl from '@/assets/img_fail.png'
|
const props = defineProps({
|
width: Number,
|
height: Number,
|
path: String
|
})
|
let state = reactive({
|
currentimageList: [],
|
defaultImgUrl: '', //默认图片
|
isDebug: false, //是否显示图片路径
|
isVisibleWaterMark: true, //是否显示水印
|
OptionssalseImg: {
|
"title": false,
|
}
|
})
|
const { path } = toRefs(props)
|
watch(path, (newVal, oldVal) => {
|
state.currentimageList = [];
|
if (newVal == null || newVal == "") return;
|
state.currentimageList.push(newVal);
|
},{immediate: true})
|
onMounted(() => {
|
state.isDebug = window.globalConfig.IsDebug;
|
state.isVisibleWaterMark = window.globalConfig.IsVisibleWaterMark;
|
})
|
const useDefaultImage = (event) => {
|
event.target.src = defaultImgUrl;
|
}
|
</script>
|
<style>
|
.tabBackground {
|
border: 0.01rem solid #eae8e8;
|
background-color: white;
|
margin-top: -0.01rem;
|
}
|
|
.imgBox {
|
width: 100%;
|
height: 100% !important;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
</style>
|
