38 lines
835 B
Vue
38 lines
835 B
Vue
<script setup lang="ts">
|
|
interface ImageSource {
|
|
mobileSrc?: string
|
|
pcSrc?: string
|
|
}
|
|
|
|
interface Props {
|
|
text?: string
|
|
imageSrc?: ImageSource
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const sanitizedContent = computed(() => {
|
|
return props.text?.replace(/\n/g, '<br/>') || ''
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<template v-if="imageSrc && 'mobileSrc' in imageSrc">
|
|
<!-- 모바일 이미지 (sm 미만) -->
|
|
<img
|
|
v-if="imageSrc.mobileSrc"
|
|
:src="imageSrc.mobileSrc"
|
|
:alt="text"
|
|
class="sm:hidden w-full h-full object-contain"
|
|
/>
|
|
<!-- PC 이미지 (sm 이상) -->
|
|
<img
|
|
v-if="imageSrc.pcSrc"
|
|
:src="imageSrc.pcSrc"
|
|
:alt="text"
|
|
class="hidden sm:block w-full h-full object-contain"
|
|
/>
|
|
</template>
|
|
<span v-else-if="text" v-dompurify-html="sanitizedContent" />
|
|
</template>
|