82 lines
1.9 KiB
Vue
82 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
src: string | { pc?: string; mo?: string }
|
|
alt?: string
|
|
imageType?: 'public' | 'cdn'
|
|
/**
|
|
* 브라우저 네이티브 priority 값
|
|
* - 'high' : fold 내 반드시 보여야 하는 이미지
|
|
* - 'low' : 중요도 낮은 이미지
|
|
* - 'auto' : 기본값, 브라우저에 위임
|
|
*/
|
|
priority?: 'high' | 'low' | 'auto'
|
|
/** 실제 이미지 로드 전까지 표시할 placeholder 이미지 경로 */
|
|
placeholder?: string
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
alt: 'image',
|
|
imageType: 'cdn',
|
|
priority: 'auto',
|
|
})
|
|
|
|
const isResponsiveMode = computed(() => {
|
|
return typeof props.src === 'object' && !!props.src.pc && !!props.src.mo
|
|
})
|
|
|
|
const imagePaths = computed(() => {
|
|
if (typeof props.src === 'string') {
|
|
const resolved = formatPathHost(props.src, {
|
|
imageType: props.imageType,
|
|
})
|
|
return { pc: '', mo: resolved }
|
|
}
|
|
|
|
return {
|
|
pc: props.src.pc
|
|
? formatPathHost(props.src.pc, {
|
|
imageType: props.imageType,
|
|
})
|
|
: '',
|
|
mo: props.src.mo
|
|
? formatPathHost(props.src.mo, {
|
|
imageType: props.imageType,
|
|
})
|
|
: '',
|
|
}
|
|
})
|
|
|
|
const placeholderSrc = computed(() => props.placeholder ?? '')
|
|
</script>
|
|
|
|
<template>
|
|
<picture v-if="isResponsiveMode">
|
|
<source
|
|
media="(min-width: 1024px)"
|
|
:srcset="imagePaths.pc || placeholderSrc"
|
|
/>
|
|
<source
|
|
media="(max-width: 1023px)"
|
|
:srcset="imagePaths.mo || placeholderSrc"
|
|
/>
|
|
<img
|
|
:src="imagePaths.mo || placeholderSrc"
|
|
:alt="alt"
|
|
v-bind="$attrs"
|
|
:loading="priority === 'high' ? 'eager' : 'lazy'"
|
|
decoding="async"
|
|
:fetchpriority="priority"
|
|
/>
|
|
</picture>
|
|
|
|
<img
|
|
v-else
|
|
:src="imagePaths.mo || placeholderSrc"
|
|
:alt="alt"
|
|
v-bind="$attrs"
|
|
:loading="priority === 'high' ? 'eager' : 'lazy'"
|
|
decoding="async"
|
|
:fetchpriority="priority"
|
|
/>
|
|
</template>
|