springboot静态资源访问及图片回显问题

文章目录


回显问题主要是静态资源上传到src里面导致的,src会编译部署,不会热更新,所以不会重新编译回显

想要在项目中实时热更新,那么我们可以将静态资源放在项目的根目录下,然后配置静态资源放行路径.可以在yaml中配置,也可以在配置类中配置.

如下:
在这里插入图片描述


```java
// 以下是自定义静态资源访问
@Configuration
public class SingerPicConfig implements WebMvcConfigurer {
/**
 * @ClassName SingerPicConfig
 * @Description 定位歌手头像地址
 * @Author YuanJie
 * @Date 2022/2/3 23:57
 */
/**
 * 默认情况下Spring Boot 使用WebMvcAutoConfiguration中配置的各种属性。
 *
 * 默认映射的文件夹有:
 *
 * classpath:/META-INF/resources
 *
 * classpath:/resources
 *
 * classpath:/static
 *
 * classpath:/public
 *
 * 上面这几个都是静态资源的映射路径,优先级顺序为:META-INF/resources > resources > static > public
 *
 * 原理: 静态映射/**。
 * 请求进来,先去找Controller看能不能处理。不能处理的所有请求又都交给静态资源处理器。静态资源也找不到则响应404页面
 *
 * 静态资源访问前缀
 * 默认无前缀
 * spring:
 *   mvc:
 *     static-path-pattern: /**
 * 当前项目 + static-path-pattern + 静态资源名 = 静态资源文件夹下找
 */
    /**
     * spring boot中上传图片回显问题
     * @param registry
     */
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("static/**").addResourceLocations( // 绝对路径映射,这个不重新部署就可以回显,因为映射你的本地
                System.getProperty("user.dir") + File.separator +"static" + File.separator);
    }
}
  • 12
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 14
    评论
首先,为了实现图片回显,我们需要先将图片上传至服务器。可以使用vue-el-upload组件上传图片,然后在服务器端使用Spring Boot保存图片文件。 在Vue组件中,可以像下面这样使用vue-el-upload组件: ``` <template> <el-upload class="upload-demo" action="http://localhost:8080/upload" :on-success="handleSuccess" :show-file-list="false" :auto-upload="true" name="file"> <el-button size="small" type="primary">点击上传</el-button> </el-upload> <img :src="imageUrl" alt="" width="200px"> </template> <script> export default { data() { return { imageUrl: '' }; }, methods: { handleSuccess(response) { this.imageUrl = response.data.url; } } } </script> ``` 在Spring Boot中,可以使用MultipartFile接收上传的文件,并将文件保存到指定的文件夹中。代码如下: ``` @RequestMapping(value="/upload", method=RequestMethod.POST) public Result uploadFile(@RequestParam("file") MultipartFile file) { if (file.isEmpty()) { return Result.error("上传失败,请选择文件"); } String fileName = UUID.randomUUID().toString() + "_" + file.getOriginalFilename(); String filePath = "/path/to/save/images/"; File dest = new File(filePath + fileName); try { file.transferTo(dest); return Result.success("上传成功", "/images/" + fileName); } catch (IOException e) { e.printStackTrace(); } return Result.error("上传失败"); } ``` 最后,在Vue组件中,需要将服务器返回的图片URL设置为img标签的src属性,从而实现图片回显

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

最难不过坚持丶渊洁

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值