解决更换图片后不回显的问题

￡神魔★判官ぃ 2023-10-12 14:32 22阅读 0赞

#### 问题描述 ####

在Javaweb项目中，实现更换头像功能，但是更换后图片不回显（最直接的解决方法，看解决方法三）  
经过排查，确定不是基本逻辑错误或者路径后开始寻找解决方法

#### 问题原理： ####

大概就是已经运行好项目中，并没有更新后添加在里面的静态资源，重启服务后就可以直接显示，希望不重启也能直接回显  
![在这里插入图片描述][a1900e498aaa421d8046127e011b5f55.png]

#### 解决方法一：添加配置类 ####

@Configuration
    public class ImagesUploadConfig implements WebMvcConfigurer {
        
    
        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) {
        
          registry.addResourceHandler("/file/**").addResourceLocations("file:E:\\graduateProject\\CarManagment\\src\\main\\webapp\\file\\");
        }
    }

但是没有成功

#### 解决方法二：通过IO流写入图片数据 ####

后端代码：

//创建Servlet输出流
                ServletOutputStream outputStream = null;
                //创建图片字节输入流
                FileInputStream inputStream = null;
                try {
        
                    //获取文件的路径+文件名
                    String photofile = photopath +photoname;
                    //建立通道
                    inputStream = new FileInputStream(photofile);
                    //将返回的数据类型进行设置
                    response.setContentType("image/jpg");
                    //创建响应流通道
                    outputStream= response.getOutputStream();
                    //读取文件流
                    //设置接收字节长度
                    int len;
                    //设置字节数组
                    byte[] buffer = new byte[1024];
                    //进行复制
                    while ((len = inputStream.read(buffer)) != -1){
        
                        //输出
                        outputStream.write(buffer,0,len);
                    }
                    //刷新流
                    outputStream.flush();
                } catch (Exception e) {
        
                    e.printStackTrace();
                }finally {
        
                    //关闭流
                    outputStream.close();
                    inputStream.close();
                }

前端代码

然后，能够显示图片但是没有样式，无果后放弃

#### 解决方法三：直接将Static资源放置在Tomcat下 ####

![在这里插入图片描述][acb8a4ef1b104e51bf04bce98ac4bb09.png]  
![在这里插入图片描述][b8e2446da11c433488f657485bbf56f2.png]  
![在这里插入图片描述][71a621c6f4cf4150ac1f62137dfb4926.png]  
然后，保存设置即可，完美运行。

[a1900e498aaa421d8046127e011b5f55.png]: https://img-blog.csdnimg.cn/a1900e498aaa421d8046127e011b5f55.png
[acb8a4ef1b104e51bf04bce98ac4bb09.png]: https://img-blog.csdnimg.cn/acb8a4ef1b104e51bf04bce98ac4bb09.png
[b8e2446da11c433488f657485bbf56f2.png]: https://img-blog.csdnimg.cn/b8e2446da11c433488f657485bbf56f2.png
[71a621c6f4cf4150ac1f62137dfb4926.png]: https://img-blog.csdnimg.cn/71a621c6f4cf4150ac1f62137dfb4926.png