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

🔍 问题描述

访问 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

修改内容:

# 修改前
pageoffice.nginx.path=

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

原因:

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

📊 问题分析

图片路径生成流程

Controller层 (TacPageOfficeReportController.java:101):

String wordImgSrc = tacPageOfficeReportService.getJcbg(rgstrId);
map.put("wordImgSrc", wordImgSrc);

Service层 (TacPageOfficeReportServiceImpl.java:134-150):

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;
}

前端页面 (showTacReport.html:41):

<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. 重启应用

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

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

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

# 检查默认图片
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 打开开发者工具，查看：

Console标签: 是否有JavaScript错误
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: 检查以下几点：

确认配置已生效:

# 查看应用启动日志，确认nginxPath的值
Get-Content .\logs\dc-po.log | Select-String "nginxPath"

检查数据库中是否有数据:

-- 检查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')
);

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

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

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

// 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: 系统已经实现了这个功能：

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

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

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

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中添加日志

@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> 标签：

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

检查 src 属性是否正确。

3. 使用curl测试图片访问

# 测试图片是否可以访问
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/
⏳ 需要重启应用使配置生效

验证方法

重启应用
访问页面
检查浏览器控制台的Network标签
确认图片请求返回200状态码

注意事项

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

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

页面图片显示问题排查.md 8.5 KB Lịch sử Raw