解决相对路径图片不显示问题

解决相对路径图片不显示问题

我们在用vue或者react中进行开发时，有时候会出现我们写 相对路径 时，图片不会在页面上显示 的问题

data(){
    
    
	return {
    
    
		imgSrc:"../../../static/banner1.png"
	}
}
 // 在template里面
<img :src='imgSrc' />

这种情况，有时候在页面上，可能图片不会显示。

我们又两种解决方法：

1.直接写上域名；比如：http://www.baidu.com/xxx

这种方法简单粗暴，但是，一般图片都是在本地的，写上域名也不太合适。

2.在相对路径前加上require

比如：

data(){
    
    
	return {
    
    
		imgSrc:require("../../../static/banner1.png")
	}
}
 // 在template里面
<img :src='imgSrc' />

将图片的相对路径用require包裹起来，这样图片就能显示了。