Bind background image

Hi, I got trouble binding the background image, it gives the below error, and I attached the code

 <!-- The slideshow -->
            <div class="carousel-inner">
              <div class="carousel-item item-1 active" :style="{backgroundImage:url('~@/assets/banner-2.jpg')}">
                <div class="carousel-caption mb-5 text-right">
                  <h1 class="display-3 text-capitalize mb-2 text-light">I am Developer</h1>
                  <a href="#" class="btn btn-lg mb-5 text-uppercase banner-btn">my work</a>
                </div>
              </div>
              <div class="carousel-item item-2" :style="{backgroundImage:url('~@/assets/banner-1.jpg')}">
                <div class="carousel-caption mb-5 text-center">
                  <h1 class="display-3 text-capitalize mb-2 text-light">I am Designer</h1>
                  <a href="#" class="btn btn-lg mb-5 text-uppercase banner-btn">my work</a>
                </div>
              </div>
              <div class="carousel-item item-3" :style="{backgroundImage:url('~@/assets/banner-1.jpg')}">
                <div class="carousel-caption mb-5 text-left">
                  <h1 class="display-3 text-capitalize mb-2 text-light">I am Artist</h1>
                  <a href="#" class="btn btn-lg mb-5 text-uppercase banner-btn">my work</a>
                </div>
              </div>
            </div>

You need to wrap url as a string as it’s a css function, not JS.

:style="{ backgroundImage: `url('~@/assets/banner-2.jpg')` }"

Thanks James, actually, I changed in this way,

<div class="carousel-item item-1 active" :style="{'background-image': 'url(' + require('~@/assets/banner-1.jpg') + ')'}">

however, I got another error, I have images in assets folder, do I need move them to the module folder?

That depends. Where is assets? These are your transform rules.

So if you need to reference an image that’s in a node package for example, you’d use ~.

If you want to reference an image that’s in your /src folder, then use @.

If you want to reference an image in your public folder, then use absolute urls /.