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

最新推荐文章于 2024-08-16 10:46:54 发布

SUMMERENT

最新推荐文章于 2024-08-16 10:46:54 发布

阅读量5.5k

点赞数 5

分类专栏： Vue java 文章标签： vue.js html5 javascript

本文链接：https://blog.csdn.net/SUMMERENT/article/details/120582341

版权

java 同时被 2 个专栏收录

25 篇文章 3 订阅

订阅专栏

Vue

7 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

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

        );
    }
}

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