49 lines
1.0 KiB
Vue
49 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
import { getResolvedHost } from '#layers/utils/styleUtil'
|
|
|
|
interface Props {
|
|
src: {
|
|
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 imagePaths = computed(() => {
|
|
return {
|
|
pc: props.src.pc ? getResolvedHost(`${rootPath}${props.src.pc}`) : '',
|
|
mo: props.src.mo ? getResolvedHost(`${rootPath}${props.src.mo}`) : '',
|
|
}
|
|
})
|
|
</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>
|
|
</template>
|