Vue页面查询，图片不能显示出来，图片配置问题，导致前端访问不到图片

Vue 前端页面，查询数据时，图片没有出来，数据库中有图片，也不报错，为什么呢？

如下图所示：

原因之一：

后端没有做图片重定向到前端Configuration配置，导致图片不显示

 配置代码如下：

@Configuration
public class SingerPicConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/img/xiimg/**").addResourceLocations(
                "file:"+System.getProperty("user.dir")
                +System.getProperty("file.separator")+"img"
                +System.getProperty("file.separator")
                +"xiimg"+System.getProperty("file.separator")

        );
    }
}

 看不懂的可以参考我的目录设置，如图

其中："/img/xiimg/**"是匹配代码中图片路径，也就是前端访问的图片路径

System.getProperty("User.dir") 表示：取到图片第一层包的当前目录,就是img包上一级目录

System.getProperty("file.separator") 表示：'/'

包名可以随便起，但是路径顺序别弄错了，也会导致图片不显示

原因之二：

vue前端问题：下面图片是改过后正确的

之前是因为，HOST：127.0.0.1:8081 ，忘了带http://

原因之三：别忘了在main.js 里面导入配置下

总的来说 图片不显示，可能是因为图片配置问题，也可能前端写入图片路径与后端图片路径不同，导致图片不显示