57 lines
1.3 KiB
Vue
57 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
src: string | { pc?: string; mo?: string }
|
|
alt?: string
|
|
imageType?: 'common' | 'game'
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
alt: 'image',
|
|
imageType: 'game',
|
|
})
|
|
|
|
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 = getImageHost(`${rootPath}${props.src}`, {
|
|
imageType: props.imageType,
|
|
})
|
|
return { pc: resolved, mo: '' }
|
|
}
|
|
|
|
return {
|
|
pc: props.src.pc
|
|
? getImageHost(`${rootPath}${props.src.pc}`, {
|
|
imageType: props.imageType,
|
|
})
|
|
: '',
|
|
mo: props.src.mo
|
|
? getImageHost(`${rootPath}${props.src.mo}`, {
|
|
imageType: props.imageType,
|
|
})
|
|
: '',
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<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>
|