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

Question

当我尝试在下面运行此代码时，我遇到了问题。 它运行，但我看不到任何图像，它写道 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"

Answer 1

尝试这样做：

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

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

Answer 2

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

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

数据 object：

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

},

Answer 3

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

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

Answer 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>