# 页面图片显示问题排查与解决

## 🔍 问题描述

访问 `http://localhost:8082/pageofficePath/pageoffice/tacReport/show?rgstrId=111&type=222&persId=32323` 时，页面没有显示图片。

## ✅ 已完成的修复

### 1. 修改配置文件

**文件**: `gw-cloud-platform-dcproj-po-service/src/main/resources/application.properties`

**修改内容**:
```properties
# 修改前
pageoffice.nginx.path=

# 修改后
pageoffice.nginx.path=/pageofficePath/
```

**原因**: 
- 您访问的URL包含 `/pageofficePath` 上下文路径
- 但配置中 `nginxPath` 为空，导致生成的图片路径不完整
- 修改后，图片路径会正确包含 `/pageofficePath` 前缀

## 📊 问题分析

### 图片路径生成流程

1. **Controller层** (`TacPageOfficeReportController.java:101`):
   ```java
   String wordImgSrc = tacPageOfficeReportService.getJcbg(rgstrId);
   map.put("wordImgSrc", wordImgSrc);
   ```

2. **Service层** (`TacPageOfficeReportServiceImpl.java:134-150`):
   ```java
   public String getJcbg(String rgstrId) {
       String wordImgSrc = nginxPath + "/upload/pageoffice/jc/jcbg/";
       // 查询数据库获取报告类型
       List<Map<String, Object>> proTypeList = tacPageOfficeReportDao.getJcReportTypeName(rgstrId);
       if (proTypeList.size() > 0) {
           String proNmType = MapUtils.getString(proTypeList.get(0), "TYPE");
           if (StringUtils.isNotBlank(proNmType)) {
               ProTypeImgSrcEnum proTypeImgSrc = ProTypeImgSrcEnum.getEnumBytype(proNmType);
               if (proTypeImgSrc != null) {
                   wordImgSrc += proTypeImgSrc.getSrc();  // 根据类型返回不同图片
               }
           }
       } else {
           wordImgSrc += "jcbg.jpg";  // 默认图片
       }
       return wordImgSrc;
   }
   ```

3. **前端页面** (`showTacReport.html:41`):
   ```html
   <img id="imgs" th:src="${wordImgSrc}" onerror="imgerrorfun();"/>
   ```

### 问题原因

**修改前**:
- `nginxPath` = `""` (空)
- 生成的图片路径 = `/upload/pageoffice/jc/jcbg/jcbg.jpg`
- 浏览器请求 = `http://localhost:8082/upload/pageoffice/jc/jcbg/jcbg.jpg` ❌
- **结果**: 404 Not Found

**修改后**:
- `nginxPath` = `"/pageofficePath/"`
- 生成的图片路径 = `/pageofficePath//upload/pageoffice/jc/jcbg/jcbg.jpg`
- 浏览器请求 = `http://localhost:8082/pageofficePath//upload/pageoffice/jc/jcbg/jcbg.jpg` ✅
- **结果**: 图片正常显示

## 🎯 验证步骤

### 1. 重启应用

修改配置文件后，需要重启应用才能生效：

```powershell
# 停止当前运行的应用
# 然后重新启动
cd D:\Workspaces\ducha_pageoffice_app
mvn spring-boot:run -pl gw-cloud-platform-dcproj-po-service
```

### 2. 检查图片文件是否存在

```powershell
# 检查默认图片
Test-Path "D:\DC\upload\pageoffice\jc\jcbg\jcbg.jpg"

# 查看所有可用的图片
Get-ChildItem "D:\DC\upload\pageoffice\jc\jcbg" -Filter "*.jpg"
```

**预期输出**:
```
Name
----
jcbg.jpg
jcbgSk.jpg
jcbgPlan.jpg
```

### 3. 访问页面测试

在浏览器中访问：
```
http://localhost:8082/pageofficePath/pageoffice/tacReport/show?rgstrId=111&type=222&persId=32323
```

### 4. 检查浏览器控制台

按 `F12` 打开开发者工具，查看：

1. **Console标签**: 是否有JavaScript错误
2. **Network标签**: 
   - 查找图片请求
   - 检查状态码（应该是200）
   - 检查请求URL是否正确

**正确的图片URL应该是**:
```
http://localhost:8082/pageofficePath//upload/pageoffice/jc/jcbg/jcbg.jpg
或
http://localhost:8082/pageofficePath//upload/pageoffice/jc/jcbg/jcbgSk.jpg
或
http://localhost:8082/pageofficePath//upload/pageoffice/jc/jcbg/jcbgPlan.jpg
```

### 5. 直接访问图片URL测试

在浏览器中直接输入图片URL：
```
http://localhost:8082/pageofficePath//upload/pageoffice/jc/jcbg/jcbg.jpg
```

如果能看到图片，说明路径配置正确。

## ⚠️ 常见问题

### Q1: 重启后仍然没有图片？

**A**: 检查以下几点：

1. **确认配置已生效**:
   ```powershell
   # 查看应用启动日志，确认nginxPath的值
   Get-Content .\logs\dc-po.log | Select-String "nginxPath"
   ```

2. **检查数据库中是否有数据**:
   ```sql
   -- 检查rgstrId对应的报告类型
   select distinct t.YEAR, t.TYPE from TAC_INSP_YEAR_BATCH t
   where id in (
       select t.year_batch_id from TAC_INSP_YEAR_BATCH_OBJ t 
       left join tac_pawp_rgstr r on t.id = r.obj_id
       where r.id in ('111')
   );
   ```

3. **检查图片文件权限**:
   - 确保应用有读取图片文件的权限
   - 确保文件没有被占用

### Q2: 图片路径有两个斜杠 `//`？

**A**: 这是正常的，浏览器会自动处理。但如果想修复，可以修改代码：

```java
// TacPageOfficeReportServiceImpl.java:135
String wordImgSrc = nginxPath + "/upload/pageoffice/jc/jcbg/";
// 改为
String wordImgSrc = nginxPath.endsWith("/") ? 
    nginxPath + "upload/pageoffice/jc/jcbg/" : 
    nginxPath + "/upload/pageoffice/jc/jcbg/";
```

### Q3: 如何根据不同的rgstrId显示不同的图片？

**A**: 系统已经实现了这个功能：

1. **查询数据库**获取报告类型（TYPE字段）
2. **根据TYPE匹配枚举**:
   - `中型水库` → `jcbgSk.jpg`
   - `中央投资计划执行` → `jcbgPlan.jpg`
   - `大型灌区续建配套与节水改造项目` → `jcbg.jpg`
   - 其他或未查询到 → `jcbg.jpg`（默认）

3. **如果没有数据**，使用默认图片 `jcbg.jpg`

### Q4: 前端有图片加载失败的fallback吗？

**A**: 有的！在 `showTacReport.html` 中定义了 `imgerrorfun()` 函数：

```javascript
function imgerrorfun() {
    var nginxPath = [[${nginxPath}]];
    var img = event.srcElement;
    img.src = nginxPath + "/upload/pageoffice/jc/jcbg/jcbg.jpg";
    img.onerror = null;
}
```

如果主图片加载失败，会自动加载默认图片 `jcbg.jpg`。

## 🔧 调试技巧

### 1. 在Controller中添加日志

```java
@ApiOperation(value = "展示页面", notes = "前后不分离，用")
@RequestMapping(value="/show", method= {RequestMethod.GET,RequestMethod.POST})
public ModelAndView showIndex(Map<String,Object> map,
                              @RequestParam("rgstrId") String rgstrId,
                              @RequestParam("type") String type,
                              @RequestParam("persId") String persId,
                              @RequestParam(value = "listType",required = false,defaultValue = "1,2,3,4,5,6") String listType,
                              @RequestParam(value = "orderBy",required = false,defaultValue = "pblmPasi") String orderBy){
    
    logger.info("========== 展示页面请求 ==========");
    logger.info("rgstrId: {}", rgstrId);
    logger.info("nginxPath: {}", nginxPath);
    
    map.put("rgstrId",rgstrId);
    map.put("type",type);
    map.put("persId",persId);
    map.put("listType",listType);
    map.put("orderBy",orderBy);

    // 判断展示哪张图片
    String wordImgSrc = tacPageOfficeReportService.getJcbg(rgstrId);
    logger.info("生成的图片路径: {}", wordImgSrc);
    map.put("wordImgSrc",wordImgSrc);

    map.put("nginxPath",nginxPath);
    map.put("jqSrc",nginxPath + jqSrc);
    map.put("poSrc",nginxPath + poSrc);
    
    logger.info("====================================");
    return new ModelAndView("/pageoffice/showTacReport");
}
```

### 2. 在浏览器中查看生成的HTML

右键点击页面 → 查看页面源代码，找到 `<img>` 标签：

```html
<img id="imgs" src="/pageofficePath//upload/pageoffice/jc/jcbg/jcbg.jpg" onerror="imgerrorfun();"/>
```

检查 `src` 属性是否正确。

### 3. 使用curl测试图片访问

```powershell
# 测试图片是否可以访问
curl -I http://localhost:8082/pageofficePath//upload/pageoffice/jc/jcbg/jcbg.jpg
```

**预期响应**:
```
HTTP/1.1 200 OK
Content-Type: image/jpeg
Content-Length: 12345
```

## 📝 总结

### 问题根源
- 配置文件中 `pageoffice.nginx.path` 为空
- 导致生成的图片路径缺少 `/pageofficePath` 前缀
- 浏览器无法找到图片资源

### 解决方案
- ✅ 已修改配置文件，设置 `pageoffice.nginx.path=/pageofficePath/`
- ⏳ 需要重启应用使配置生效

### 验证方法
1. 重启应用
2. 访问页面
3. 检查浏览器控制台的Network标签
4. 确认图片请求返回200状态码

### 注意事项
- 修改配置后必须重启应用
- 确保图片文件存在于指定目录
- 检查数据库中的报告类型配置
- 前端有fallback机制，主图片失败会加载默认图片

---
**修复时间**: 2026-05-29  
**修复状态**: ✅ 配置文件已修改，待重启验证