用webpack打包vue项目,图片路径错误。

我使用background属性,设置一个div的背景为一张图片,这个图片和这个vue组件在同一个文件夹下,assetsPublicPath也从“/”改成了“./”,在同一个组件中,直接使用imgsrc的方式导入的图片打包后,没有问题,但是使用background的div图片路径错误,用f12打开观察了一下,这个背景图片和img图片的区别在于img的图片前有“./”,而背景图的图片没有。图片html代码为:
背景图的div的css为:
background:url('./bg.jpg');
background-repeat:no-repeat;
background-position:center;
background-size:cover;
30秒到达战场
浏览 1002回答 2
2回答

杨__羊羊

webpack打包vue项目,会把css部分提取到单独的css文件中,这样造成了图片路径引用错误,一般这种资源都是放在static目录下,然后引用('/static/...')

慕后森

找到你的utils.js文件,找到use:loaders这句话所在的配置,加入这句话:publicPath:'../',vue的loader对静态资源的路径是需要配置的。注意publicPath里面写的路径不是你图片完整的路径,比如../../static/里面的img,你只需要写'../../'。sotryit~
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript