Vue中如何为b-navbar设置动态背景图？路径异常问题求助

为什么路径表现不同？ #

• SCSS中的相对路径会被Webpack编译处理：在Vue项目中，.scss文件里的background-image: url("../../assets/img/sky-views/3.png")会被Webpack的url-loader/file-loader解析，它会将图片复制到打包后的输出目录（通常是dist/assets），并把路径替换为打包后的绝对URL，所以能正常加载。
• 模板内联样式的路径不会被编译：直接在v-bind:style里写的字符串路径，Webpack不会对其进行解析，浏览器会将其视为相对于当前页面URL的相对路径，而非相对于源码文件的路径，导致路径指向错误，图片无法加载。

你忽略的核心点 #

没有区分Vue项目中静态资源的两种处理逻辑：编译时资源解析（SCSS、require()/import导入的资源）和运行时原始路径（模板中直接写的字符串路径）。

正确实现方法 #

方法1：使用require()解析资源路径 #

通过require()导入图片，让Webpack处理路径，返回正确的打包后URL：

export default {
  data() {
    return {
      headerStyle: {
        backgroundImage: `url(${require('../../assets/img/sky-views/3.png')})`
      }
    }
  }
}

如果需要动态切换背景图，可以提前把所有需要的图片用require()导入并存入数组，切换时直接赋值：

data() {
  return {
    bgImages: [
      require('../../assets/img/sky-views/1.png'),
      require('../../assets/img/sky-views/2.png'),
      require('../../assets/img/sky-views/3.png')
    ],
    currentBgIndex: 0
  }
},
computed: {
  headerStyle() {
    return {
      backgroundImage: `url(${this.bgImages[this.currentBgIndex]})`
    }
  }
}

注意：内联样式本身优先级高于类样式，不需要加!important，如果确实需要强制覆盖，可以保留，但通常没必要。

方法2：将图片放在public目录下使用绝对路径 #

把图片移动到项目根目录的public/img/sky-views/下，然后直接使用绝对路径：

data() {
  return {
    headerStyle: {
      backgroundImage: 'url("/img/sky-views/3.png")'
    }
  }
}

public目录下的资源不会被Webpack编译，会原样复制到打包后的根目录，所以可以直接通过根相对路径访问，适合不需要Webpack处理的静态资源。

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