48 lines
1.2 KiB
Vue
48 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<div class="search-image-wrap bg-gray-100 inline-block">
|
||
|
|
<div v-if="!imageUrl" class="text-red-500 text-xs p-2">
|
||
|
|
No image URL found. Attributes: {{ JSON.stringify(messageContentAttributes) }}
|
||
|
|
</div>
|
||
|
|
<img
|
||
|
|
v-if="imageUrl"
|
||
|
|
:src="imageUrl"
|
||
|
|
alt="搜索图片"
|
||
|
|
class="h-48 w-auto rounded-lg block"
|
||
|
|
@error="handleImageError"
|
||
|
|
@load="handleImageLoad"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { computed } from 'vue';
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
messageContentAttributes: {
|
||
|
|
type: Object,
|
||
|
|
default: () => {},
|
||
|
|
},
|
||
|
|
message: {
|
||
|
|
type: String,
|
||
|
|
default: '',
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const imageUrl = computed(() => {
|
||
|
|
console.log('[SearchImage] messageContentAttributes:', props.messageContentAttributes);
|
||
|
|
console.log('[SearchImage] message:', props.message);
|
||
|
|
const url = props.messageContentAttributes?.url || props.message || '';
|
||
|
|
console.log('[SearchImage] Computed imageUrl:', url);
|
||
|
|
return url;
|
||
|
|
});
|
||
|
|
|
||
|
|
const handleImageError = (event) => {
|
||
|
|
console.error('[SearchImage] Image failed to load:', imageUrl.value);
|
||
|
|
console.error('[SearchImage] Error event:', event);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleImageLoad = () => {
|
||
|
|
console.log('[SearchImage] Image loaded successfully:', imageUrl.value);
|
||
|
|
};
|
||
|
|
</script>
|