Files
sori.studio/components/content/ProseImage.vue
zenn 47620ab24c v1.2.1: 블록 설정 패널·이미지 alt 토글 및 포커스 수정
게시물 설정 사이드바 오버레이로 이미지·갤러리·임베드를 편집하고, 파일명 alt 토글과 패널 입력 중 닫힘 문제를 해결했다.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-15 18:22:30 +09:00

34 lines
792 B
Vue

<script setup>
defineProps({
src: {
type: String,
required: true
},
alt: {
type: String,
default: ''
},
variant: {
type: String,
default: 'regular'
}
})
</script>
<template>
<figure
class="prose-image mb-2.5"
:class="{
'prose-image--wide lg:-mx-10 lg:max-w-none': variant === 'wide',
'prose-image--full lg:-mx-20 lg:max-w-none': variant === 'full'
}"
>
<div class="overflow-hidden rounded-[10px] border border-[var(--site-line)] bg-[var(--site-panel)]">
<img class="prose-image__media w-full object-cover" :src="src" :alt="alt">
</div>
<figcaption v-if="$slots.default" class="prose-image__caption mt-1.5 text-center text-sm text-[var(--site-muted)]">
<slot />
</figcaption>
</figure>
</template>