调用数据库存储的文件路径时无法渲染上传图片求助

在Spring Boot项目中使用Thymeleaf渲染图片时，数据库存储的文件路径无法加载已上传图片，页面显示图片无法加载，但图片已确认存储在项目根目录下的GEM/uploads/目录中，Controller能正确获取并打印图片路径。

相关代码片段 #

Thymeleaf模板代码 #

注意：代码中存在拼写错误，th:scr应为th:src，这是导致图片加载失败的常见原因之一

<div>
    <img th:scr="@{/uploads/${image}}" alt="Uploaded Image" width="200px" height="200px"/>
</div>

Controller代码 #

@GetMapping("/images")
public String viewUserImages(Model model, User user) {
    user = userService.getCurrentUser();
    if (user != null) {
        List<ImageMetaData> img = imageService.getImagesByUser(user);
        List<String> images = ImageMetaData.filePathStartFromDate(img);
        for (String i : images) {
            System.out.println(i);
        }
        model.addAttribute("images", images); // Add images to the template
    } else {
        model.addAttribute("error", "You need to be logged in to view images.");
    }
    return "imageGallery";
}

控制台打印的图片路径 #

2025/02/23/e2ac3061-e334-4dec-9a08-4298475edc08.jpg

2025/02/23/e533359f-e8f1-46a7-90d2-c921299d10dc.jpg

排查与解决方向 #

1. 修正Thymeleaf属性拼写错误
   将模板中的th:scr改为th:src，这是最容易忽略的低级错误，会导致Thymeleaf无法正确解析图片URL。

2. 配置Spring Boot静态资源映射
   Spring Boot默认不会直接暴露项目根目录下的自定义文件夹，需要添加静态资源映射配置，让/uploads/**请求指向实际存储目录：

   @Configuration
   public class WebConfig implements WebMvcConfigurer {
       @Override
       public void addResourceHandlers(ResourceHandlerRegistry registry) {
           // 映射/uploads/**到项目根目录下的GEM/uploads/
           registry.addResourceHandler("/uploads/**")
                   .addResourceLocations("file:./GEM/uploads/");
       }
   }
   

3. 验证页面渲染后的URL正确性
   打开浏览器开发者工具，查看页面中img标签的实际src属性，确认是否生成了正确的URL（例如http://localhost:8080/uploads/2025/02/23/e2ac3061-e334-4dec-9a08-4298475edc08.jpg），如果路径错误，检查Thymeleaf表达式的拼接逻辑。

4. 检查文件系统权限
   在Mac系统中，确保GEM/uploads目录及所有图片文件拥有可读权限，执行以下命令设置权限：

   chmod -R 755 ./GEM/uploads
   

5. 确认存储路径与数据库路径一致
   核对数据库中存储的路径和实际文件的存储路径是否完全匹配，包括斜杠、日期目录、文件名的大小写（Mac系统默认不区分大小写，但代码中需保持一致）。

内容的提问来源于stack exchange，提问作者Alicia