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

最新推荐文章于 2025-06-18 11:24:19 发布

原创最新推荐文章于 2025-06-18 11:24:19 发布 · 1.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #webpack

vue 专栏收录该内容

2 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<div :style="{backgroundImage:'url('+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: '../../'
      })