How do I include image in BootstrapVue carousel?

Question

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>

I have added Find below images of the result:

I am certain the images are correctly saved in the right location:

Check the network tab. It's probably not trying to load the image from where you think it is. — Samsquanch
– Samsquanch, Commented Oct 18, 2019 at 19:20
Are you positive that ../assets/life.jpg is the correct file location for the image? — BLAKE
– BLAKE, Commented Oct 18, 2019 at 19:24
@BLAKE I am certain that it is the correct file location. I have included an image to show the actual file structure — Iamlimo
– Iamlimo, Commented Oct 18, 2019 at 19:34

Troy Morehouse · Accepted Answer · 2019-11-29 19:53:59Z

5

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)

answered Oct 18, 2019 at 19:56

Troy Morehouse

5,4351 gold badge30 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

How do I modify this? Couldnt find vue.config.js in my project file

It might be in your webpack.config.js file or if using Nuxt.js in your nuxt.config.js.file. vue-loader.vuejs.org/guide/asset-url.html#asset-url-handling