Search code examples
javascriptvue.jsvue-componentvue-clibootstrap-vue

How do I include image in BootstrapVue carousel?

I am trying to add an image to the img-src="" attribute of b-carousel in BoostrapVue. The image is currently saved in the asset folder.

  <b-carousel-slide img-src="../assets/life.jpg">
        <h1>Hello world!</h1>
      </b-carousel-slide>

enter image description here

I have added Find below images of the result: enter image description here

I am certain the images are correctly saved in the right location: enter image description here

Solution

  • If using a loader with webpack (i.e. vue-loader, url-loader, etc), you need to ensure that the loader knows that img-src accepts a URL.

    See the docs on information on how to tell the loaders to handle URL props on custom components: https://bootstrap-vue.js.org/docs/reference/images (specifically Vue Loader transformAssetUrls)