jointrashposs/components/content/ProseImg.vue
2023-07-15 17:32:48 +09:00

35 lines
655 B
Vue

<template>
<img :src="refinedSrc" :alt="alt" :width="width" :height="height" loading="lazy" />
</template>
<script setup lang="ts">
import { withBase } from 'ufo'
import { useRuntimeConfig, computed } from '#imports'
const props = defineProps({
src: {
type: String,
default: ''
},
alt: {
type: String,
default: ''
},
width: {
type: [String, Number],
default: undefined
},
height: {
type: [String, Number],
default: undefined
}
})
const refinedSrc = computed(() => {
if (props.src?.startsWith('/') && !props.src.startsWith('//')) {
return withBase(props.src, useRuntimeConfig().app.baseURL)
}
return props.src
})
</script>