assistant-storefront/app/javascript/shared/components/SearchImage.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>