fix. img 컴포넌트 수정

This commit is contained in:
clkim
2025-10-30 21:42:19 +09:00
parent 8229550220
commit e9a9299a4a
3 changed files with 23 additions and 24 deletions

View File

@@ -1,24 +1,28 @@
<script setup lang="ts">
import { computed } from 'vue'
import { getResolvedHost } from '#layers/utils/styleUtil'
interface Props {
src: {
pc?: string
mo?: string
}
src: string | { pc?: string; mo?: string }
alt?: string
objectFit?: 'contain' | 'cover'
}
const props = withDefaults(defineProps<Props>(), {
alt: 'image',
objectFit: 'contain',
})
const isDev = process.env.NODE_ENV === 'development'
const rootPath = isDev ? '' : '/templates/brand'
const isResponsiveMode = computed(() => {
return typeof props.src === 'object' && !!props.src.pc && !!props.src.mo
})
const imagePaths = computed(() => {
if (typeof props.src === 'string') {
const resolved = getResolvedHost(`${rootPath}${props.src}`)
return { pc: resolved, mo: '' }
}
return {
pc: props.src.pc ? getResolvedHost(`${rootPath}${props.src.pc}`) : '',
mo: props.src.mo ? getResolvedHost(`${rootPath}${props.src.mo}`) : '',
@@ -27,22 +31,17 @@ const imagePaths = computed(() => {
</script>
<template>
<picture v-if="imagePaths" ref="pictureRef">
<source
v-if="imagePaths.pc"
media="(min-width: 1024px)"
:srcset="imagePaths.pc"
/>
<source
v-if="imagePaths.mo"
media="(max-width: 1023px)"
:srcset="imagePaths.mo"
/>
<img
:src="imagePaths.pc || imagePaths.mo"
:alt="alt"
:class="`w-full h-full object-${objectFit}`"
loading="lazy"
/>
<picture v-if="isResponsiveMode">
<source media="(min-width: 1024px)" :srcset="imagePaths.pc" />
<source media="(max-width: 1023px)" :srcset="imagePaths.mo" />
<img :src="imagePaths.pc" :alt="alt" v-bind="$attrs" loading="lazy" />
</picture>
<img
v-else
:src="imagePaths.pc || imagePaths.mo"
:alt="alt"
v-bind="$attrs"
loading="lazy"
/>
</template>

View File

@@ -45,7 +45,7 @@ const buttonListData = computed(() => {
/>
<div v-if="imgListData" class="img-container">
<div v-for="(item, index) in imgListData" :key="index" class="img-item">
<AtomsResourcesImg
<AtomsImgResources
:resources-data="item"
object-fit="contain"
:alt="item?.group_label"