38 lines
843 B
Vue
38 lines
843 B
Vue
|
<template>
|
||
|
|
<div class="search-image-bubble">
|
||
|
|
<div v-if="!imageUrl" class="p-4 text-n-slate-11 text-sm">
|
||
|
|
No image URL
|
||
|
|
</div>
|
||
|
|
<div v-else class="inline-block">
|
||
|
|
<img
|
||
|
|
:src="imageUrl"
|
||
|
|
alt="Search Image"
|
||
|
|
class="max-w-md rounded-lg shadow-sm"
|
||
|
|
@error="handleImageError"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { computed } from 'vue';
|
||
|
|
import { useMessageContext } from '../provider.js';
|
||
|
|
|
||
|
|
const { contentAttributes, content } = useMessageContext();
|
||
|
|
|
||
|
|
const imageUrl = computed(() => {
|
||
|
|
return contentAttributes.value?.url || content.value || '';
|
||
|
|
});
|
||
|
|
|
||
|
|
const handleImageError = (event) => {
|
||
|
|
console.error('[SearchImageBubble] Image failed to load:', imageUrl.value);
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.search-image-bubble img {
|
||
|
|
max-height: 400px;
|
||
|
|
width: auto;
|
||
|
|
}
|
||
|
|
</style>
|