SpringBoot项目配置静态资源映射后商品图片无法正常显示问题

1. 资源路径配置格式错误 #

你当前的本地文件路径配置不符合Spring资源路径规则，Windows系统下本地文件的file协议需要三个前置斜杠，修改WebConfig.kt中的资源路径配置：

package com.nilmani.cmsshopingcart

import org.springframework.context.annotation.Configuration
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer
@Configuration
class WebConfig : WebMvcConfigurer {
    override fun addResourceHandlers(registry: ResourceHandlerRegistry) {
        registry
            .addResourceHandler("/media/**")
            // 把原来的file:/改为file:///
            .addResourceLocations("file:///C:/Users/shyamal/Downloads/cms-shopping-cart/src/main/resources/static/media/")
    }
}

注意：该路径为本地开发环境硬编码路径，项目打包为jar运行后该路径会失效，生产环境建议改为可配置的存储路径（比如挂载的磁盘目录、对象存储服务等）。

2. Thymeleaf路径拼接不规范 #

现有页面的图片路径拼接写法容易出现多余斜杠、变量解析错误问题，修改product index.html中的img标签写法：

<img style="width:120px;" th:src="@{/media/{imageName}(imageName=${product.image})}" alt="商品图片">

使用Thymeleaf的路径变量占位符写法，框架会自动处理斜杠拼接问题，避免出现/media//xxx.jpg这类错误路径。

3. 其他排查方向 #

• 检查你配置的media目录下，是否存在product.image字段存储的对应文件名，文件名大小写是否匹配
• 如果项目集成了Spring Security，需要在安全配置中放行/media/**路径，避免资源被权限拦截
• 调试时可直接在浏览器地址栏输入http://localhost:端口/media/你的图片文件名，如果能正常访问说明资源配置正常，问题出在页面路径渲染上，如果不能访问则优先排查配置和文件存储问题

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