初始化项目代码
This commit is contained in:
251
docs/前端图片渲染修复.md
Normal file
251
docs/前端图片渲染修复.md
Normal file
@@ -0,0 +1,251 @@
|
||||
# 前端图片渲染修复指南
|
||||
|
||||
## 问题分析
|
||||
|
||||
根据日志分析，**后端已完美修复**，图片数据已正确返回，但前端没有正确渲染：
|
||||
|
||||
### 后端返回的数据格式
|
||||
```javascript
|
||||
{
|
||||
"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 组件示例：
|
||||
```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. 处理历史会话消息
|
||||
|
||||
确认在获取历史会话的接口调用后，正确地将数据传递给消息渲染组件：
|
||||
|
||||
```javascript
|
||||
// 示例：在 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. 添加图片点击预览功能（可选优化）
|
||||
|
||||
```vue
|
||||
<!-- 在组件中添加图片预览模态框 -->
|
||||
<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)"
|
||||
/>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 验证步骤
|
||||
|
||||
1. **检查浏览器控制台**：打开浏览器开发者工具（F12），查看 Console 标签，确认没有 JavaScript 错误
|
||||
2. **检查网络请求**：在 Network 标签中，确认图片请求（如 `/files/img/49d2910b148d.jpg`）状态码为 200
|
||||
3. **确认数据结构**：在 Network 标签中，检查 `/api/ai/session/{sessionId}` 接口的响应，确认 `images` 字段存在且格式正确
|
||||
|
||||
---
|
||||
|
||||
## 常见问题排查
|
||||
|
||||
### 问题1：images 字段为 null 或 undefined
|
||||
**原因**：可能旧版本的消息没有 images 字段
|
||||
**解决**：添加空值检查
|
||||
```vue
|
||||
<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` 字段的完整结构：
|
||||
|
||||
```json
|
||||
{
|
||||
"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` 字段处理 | 🔴 高 |
|
||||
| 确保正确解析和渲染图片列表 | 🔴 高 |
|
||||
| 添加图片加载错误处理 | 🟡 中 |
|
||||
| 添加图片预览功能 | 🟢 低 |
|
||||
| 优化图片样式和交互 | 🟢 低 |
|
||||
Reference in New Issue
Block a user