Vue项目打包---背景图片无法显示

最新推荐文章于 2023-12-28 11:41:33 发布

原创最新推荐文章于 2023-12-28 11:41:33 发布 · 1.7k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #webpack

收录于

vue 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了解决Vue项目中背景图片在本地运行正常但在服务器上无法显示的问题。通过两种方法解决：一是在div标签中动态绑定style使用require加载图片路径；二是修改build/util.js中的publicPath配置。

vue项目中经常会遇到给div设置背景图片，一般会在css中给对应div设置background-image：url(https://blog.csdn.net/path),但是这个路径本地运行一般本地运行没有问题，打包后放到服务器上运行会发现背景图片无法显示了，查阅后发现这其实和webpack打包有关，要么不要在css中设置background_image，直接在标签中绑定style，例如

<div :style="{backgroundImage:'url(https://blog.csdn.net/'+require('assets/img/common/bg.png')+')'}"></div>

或者在build/util.js中配置publicPath：“../../”

// (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../'
      })