fix. img 컴포넌트 수정
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user