如何链接背景图像 [vue cli]答案

【问题标题】：How can I link background-image [vue cli]如何链接背景图像 [vue cli]
【发布时间】：2021-07-15 11:47:01
【问题描述】：

当我尝试在下面运行此代码时，我遇到了问题。它运行，但我看不到任何图像，它写了那个 url（未知）。我该如何解决。所有图片肯定存在。

<template>
  <div class="slider"></div>
</template>
<style lang="scss" scoped>
.slider {
  width: 100%;
  height: 100%;
  background-image: url("../assets/images/slides/2160/0.jpg");
}
</style>
<script>
export default {
  name: "Slider",
};
</script>

感谢它有效 - [js vue.js]

backgroundImage: `url(${require('../assets/images/slides/2160/0.jpg')})`

但是如果我的路径已经使用了 ${}，我该怎么办

"../assets/images/slides/${this.$assetsResolution}/${i}.jpg"

【问题讨论】：

标签： javascript html css vue.js webpack

【解决方案1】：

尝试这样做：

<template>
  <div :style="bgImg"></div>
</template>

<script>
  export default {
    data() {
      return {
        bgImg: {
          backgroundImage: `url(${require('../assets/images/0.jpg')})`
        }
      }
    }
  }
</script>

【讨论】：

谢谢，这行得通，但是我如何在已经使用 ${} 的表达式中使用这个方法 - "../assets/images/${this.$assetsResolution}/${ i}.jpg"
url(${require('../assets/images/${1}.jpg')}) 不起作用吗？来自互联网的图片总是效果更好。

【解决方案2】：

如前所述，使用数据中的字段来获取图像并将其链接到您的 dom。模板：

  <div
class=" login d-flex justify-content-center align-items-center"
:style="{ background: ` center/cover url(${image})` }"

数据对象：

  data() {
return {
  image: require('@/path/to/picture/yourimagehere.jpeg'),
};

【讨论】：

【解决方案3】：

最好的方法是在beforeMount生命周期钩子中加载它

beforeMount(){
    const styles = {
      "background": url('../assets/images/0.jpg'),
      "background-size": "cover",
      "background-repeat": "no-repeat",
    };
    Object.assign(document.body.style, styles);
}

【讨论】：

【解决方案4】：

 <div
        class=" search-box car-rims"
        :style="{
          backgroundImage: `linear-gradient( rgba(255, 255, 255, 1.45), rgba(255, 255, 255, 0.45) ), url(
      ${require('@/assets/your-image.jpg')})`,
          backgroundSize: 'cover',
          backgroundRepeat: 'norepeat',
        }"
      >
        
      </div>

【讨论】：