|
|
@@ -0,0 +1,299 @@
|
|
|
+# 页面图片显示问题排查与解决
|
|
|
+
|
|
|
+## 🔍 问题描述
|
|
|
+
|
|
|
+访问 `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
|
|
|
+**修复状态**: ✅ 配置文件已修改,待重启验证
|