guxz/my-springboot-project

Fork 0

Files

guxz 5b12356567 初始化项目代码

2026-06-03 12:43:48 +08:00

5.8 KiB

Raw Blame History

前端图片渲染修复指南

问题分析

根据日志分析，后端已完美修复，图片数据已正确返回，但前端没有正确渲染：

后端返回的数据格式

{
  "success": true,
  "data": [
    {
      "id": 175,
      "role": "assistant",
      "content": "...",
      "images": [
        {
          "doc_name": "1.docx",
          "page": 1,
          "image_id": "49d2910b148d.jpg",
          "url": "/files/img/49d2910b148d.jpg"
        }
      ]
    }
  ]
}

问题现象

从HTML片段可以看到，页面中只有引用来源和文本内容，没有任何 <img> 标签渲染出来。

修复步骤

1. 确认前端代码位置

首先找到渲染聊天消息的前端组件，通常在以下位置：

src/components/ChatMessage.vue
src/views/ChatView.vue
或其他类似位置

2. 修改消息渲染代码

在渲染消息的地方，添加对 images 字段的处理：

Vue 组件示例：

<template>
  <div class="message-content">
    <!-- 原有文本渲染 -->
    <div v-html="message.content"></div>
    
    <!-- 新增：图片渲染 -->
    <div v-if="message.images && message.images.length > 0" class="message-images">
      <div v-for="(image, index) in message.images" :key="index" class="image-item">
        <img 
          :src="image.url" 
          :alt="image.description || '图片'" 
          class="message-image"
          loading="lazy"
          @error="handleImageError($event, image)"
        />
        <div v-if="image.doc_name" class="image-info">
          <span class="doc-name">{{ image.doc_name }}</span>
          <span v-if="image.page" class="page-num">第 {{ image.page }} 页</span>
        </div>
      </div>
    </div>
    
    <!-- 原有引用卡片 -->
    <div v-if="message.sources" class="references-card">
      <!-- ... -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'ChatMessage',
  props: {
    message: {
      type: Object,
      required: true
    }
  },
  methods: {
    handleImageError(event, image) {
      console.error('图片加载失败:', image);
      // 可选：显示占位图
      // event.target.src = '/placeholder-image.jpg';
    }
  }
}
</script>

<style scoped>
.message-images {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.image-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.message-image {
  max-width: 100%;
  max-height: 400px;
  border-radius: 8px;
  object-fit: contain;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.message-image:hover {
  transform: scale(1.02);
}

.image-info {
  font-size: 12px;
  color: #999;
  display: flex;
  gap: 8px;
}
</style>

3. 处理历史会话消息

确认在获取历史会话的接口调用后，正确地将数据传递给消息渲染组件：

// 示例：在 API 调用处
async function loadSessionHistory(sessionId) {
  try {
    const response = await fetch(`/api/ai/session/${sessionId}`);
    const result = await response.json();
    
    if (result.success) {
      // 确保 messages 数据正确传递给组件
      messages.value = result.data;
    }
  } catch (error) {
    console.error('加载历史会话失败:', error);
  }
}

4. 添加图片点击预览功能（可选优化）

<!-- 在组件中添加图片预览模态框 -->
<div v-if="showPreview && previewImage" class="image-preview-overlay" @click="closePreview">
  <img :src="previewImage.url" class="preview-image" alt="预览" />
  <button class="close-btn" @click.stop="closePreview">×</button>
</div>

<script>
// 在 methods 中添加
openPreview(image) {
  this.previewImage = image;
  this.showPreview = true;
}

closePreview() {
  this.showPreview = false;
  this.previewImage = null;
}
</script>

<!-- 修改 img 标签，添加点击事件 -->
<img 
  :src="image.url" 
  :alt="image.description || '图片'" 
  class="message-image"
  @click="openPreview(image)"
  @error="handleImageError($event, image)"
/>

验证步骤

检查浏览器控制台：打开浏览器开发者工具（F12），查看 Console 标签，确认没有 JavaScript 错误
检查网络请求：在 Network 标签中，确认图片请求（如 /files/img/49d2910b148d.jpg）状态码为 200
确认数据结构：在 Network 标签中，检查 /api/ai/session/{sessionId} 接口的响应，确认 images 字段存在且格式正确

常见问题排查

问题1：images 字段为 null 或 undefined

原因：可能旧版本的消息没有 images 字段解决：添加空值检查

<div v-if="message.images && message.images.length > 0" class="message-images">

问题2：图片加载 404

原因：Nginx 路径配置问题解决：确认 Nginx 配置正确映射了 /files/img/ 路径

问题3：图片跨域

原因：图片域名与前端域名不一致解决：使用后端代理接口 /api/image/{imageId}/data 而不是 /files/img/ 路径

后端返回的完整数据说明

后端返回的 ChatMessage 中 images 字段的完整结构：

{
  "images": [
    {
      "image_id": "49d2910b148d.jpg",
      "url": "/files/img/49d2910b148d.jpg",
      "doc_name": "1.docx",
      "page": 1,
      "description": "图片描述（可选）",
      "type": "image"
    }
  ]
}

主要字段说明：

url: 图片的 Nginx 静态资源路径，直接使用即可
image_id: 图片的唯一标识
doc_name: 来源文档名称
page: 来源页码
description: 图片描述（可能为 null）

修改总结

任务	优先级
在消息渲染组件中添加 `images` 字段处理	🔴 高
确保正确解析和渲染图片列表	🔴 高
添加图片加载错误处理	🟡 中
添加图片预览功能	🟢 低
优化图片样式和交互	🟢 低

5.8 KiB Raw Blame History Unescape Escape