Vue项目:将资源路径使用相对路径后,部分图片无法显示
绝对路径通过上一篇文档,使用publicPath实现绝对路径转相对路径,这一篇,来说说我之后碰到的问题.
在资源路径改变为相对路径后,我发现代码中比如css引入的图片,它还是处于绝对地址,并且没有办法显示出来,提示为404找不到图片。
- 解决办法:
- 通过less或scss,定义一个变量baseUrl,然后通过字符串拼接的方式,在url路径中拼接到原本图片路径的前面即可。
- scss定义变量使用
$
开头 - less定义变量使用
@
开头
// 这里举例使用scss
$baseUrl: "./";
background-image: url($baseUrl + "img/abc.png");