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

Question

when I'm trying to run this code below, I have a problem. It runs, but I can't see any images and it writes that url (unknown). How can I solve it. All images definately exists.

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

Thanks it works — [js vue.js]

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

but what should I do if my path already use ${} for example

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

Answer 1

try doing this:

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

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

Answer 2

As Mentioned, use a field in data to get the image and link it to your dom. The template:

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

the data object:

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

},

Answer 3

The best way is to load it in beforeMount lifecycle hook

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>