63 lines
1.4 KiB
Vue
63 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { getResolvedHost } from '#layers/utils/styleUtil'
|
|
import type { PageDataResourceGroup } from '#layers/types/api/pageData'
|
|
|
|
interface Props {
|
|
resourcesData?: PageDataResourceGroup
|
|
objectFit?: 'contain' | 'cover'
|
|
alt?: string
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
objectFit: 'contain',
|
|
})
|
|
|
|
const imagePaths = computed(() => {
|
|
if (!props.resourcesData?.res_path) return null
|
|
|
|
const pcPath =
|
|
props.resourcesData.res_path.path_pc ?? props.resourcesData.res_path.path_mo
|
|
const moPath =
|
|
props.resourcesData.res_path.path_mo ?? props.resourcesData.res_path.path_pc
|
|
|
|
return {
|
|
pc: pcPath ? getResolvedHost(pcPath) : '',
|
|
mo: moPath ? getResolvedHost(moPath) : '',
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<picture v-if="imagePaths">
|
|
<source media="(min-width: 1024px)" :srcset="imagePaths.pc" />
|
|
<source media="(max-width: 1023px)" :srcset="imagePaths.mo" />
|
|
<img
|
|
:src="imagePaths.pc"
|
|
:alt="alt"
|
|
:class="`w-full h-full object-${objectFit}`"
|
|
loading="lazy"
|
|
/>
|
|
</picture>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* 이미지 깨짐 시 보더 및 아이콘 제거 */
|
|
img {
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
|
|
/* 깨진 이미지 아이콘과 alt 텍스트 숨김 */
|
|
img::before,
|
|
img::after {
|
|
display: none;
|
|
}
|
|
|
|
/* alt 텍스트 영역 숨김 */
|
|
img[alt] {
|
|
text-indent: -9999px;
|
|
overflow: hidden;
|
|
display: block;
|
|
}
|
|
</style>
|