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 里面导入配置下
总的来说 图片不显示,可能是因为图片配置问题,也可能前端写入图片路径与后端图片路径不同,导致图片不显示
标签:Vue,getProperty,img,前端,System,file,图片,页面 来源: https://blog.csdn.net/SUMMERENT/article/details/120582341