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

当Vue前端页面的图片无法显示时，可能是由于后端未正确配置图片重定向，例如在Spring Boot中未配置`WebMvcConfigurer`来处理静态资源。此外，前端请求图片时URL格式错误，如忘记添加`http://`前缀，也会导致图片不显示。解决办法包括检查后端资源配置，确保前端路径与后端实际图片路径一致，并在`main.js`中导入相关配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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")

        );
    }
}

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