Vue项目中div背景图片404求助：img标签路径可用背景图不行

问题原因 #

Vue项目里，<img>的src属性会被webpack的资源加载器自动解析，把相对路径转换为打包后的正确资源路径；但内联样式（包括style属性和:style绑定）中的url()字符串，webpack不会主动处理，浏览器会以当前页面路径为基准请求资源，导致路径错误返回404。这不是Vue的限制，是webpack的资源处理逻辑差异导致的。

解决方案 #

1. 使用基于public目录的绝对路径

public目录下的资源打包后会放在项目根目录，直接用/开头的绝对路径即可：

<!-- 直接用style属性 -->
<div class="hero-wrap" style="background-image: url('/images/toyota_cross_background.png');" data-stellar-background-ratio="0.5"></div>

<!-- 用:style绑定 -->
<div class="hero-wrap" :style="{ backgroundImage: 'url(/images/toyota_cross_background.png)' }" data-stellar-background-ratio="0.5"></div>

2. 用require()让webpack解析路径

通过require()导入图片资源，让webpack处理路径转换：

<!-- 直接在:style中使用 -->
<div class="hero-wrap" :style="{ backgroundImage: `url(${require('../../public/images/toyota_cross_background.png')})` }" data-stellar-background-ratio="0.5"></div>

<!-- 先在script中导入再使用 -->
<script>
export default {
  data() {
    return {
      bgImg: require('../../public/images/toyota_cross_background.png')
    }
  }
}
</script>

<template>
  <div class="hero-wrap" :style="{ backgroundImage: `url(${bgImg})` }" data-stellar-background-ratio="0.5"></div>
</template>

3. 在CSS类中设置背景（推荐）

如果样式固定，把背景图片写在<style>标签里，webpack会自动解析路径：

.hero-wrap {
  background-image: url('../../public/images/toyota_cross_background.png');
  /* 可选：添加背景样式保证显示效果 */
  background-size: cover;
  background-position: center;
}

模板中直接使用类：

<div class="hero-wrap" data-stellar-background-ratio="0.5"></div>

内容的提问来源于stack exchange，提问作者ilia sidamonidze