Help: Using images in carousel

How may I use images from my project in img tag of b-carousel-slide? I’m trying to define img=“~@/assets/img/thumbnails/01.jpg”, but it doesn’t works.

<div class="container-fluid">
  <div class="container">

    <b-carousel controls indicators :interval="7000" background="#ABABAB" height="300px">
      <!-- Text slides -->
      <b-carousel-slide height="300px" caption="First slide" text="Nulla vitae elit libero, a pharetra augue mollis interdum." img="~@/assets/img/thumbnails/01.jpg">
      </b-carousel-slide>

    </b-carousel>

  </div>
</div>

[tmorehouse]

I know this is an old issue, but here is a solution. In your vue-loader config options, you need to instruct it to know which props are available to be transformed via the transformToRequire option of vue-loader:

transformToRequire: {
  img: 'src',
  image: 'xlink:href',
  'b-img': 'src',
  'b-img-lazy': ['src', 'blank-src'],
  'b-card': 'img-src',
  'b-card-img': 'img-src',
  'b-carousel-slide': 'img-src',
  'b-embed': 'src'
}

The default for transformToRequire is:

transformToRequire: { img: ‘src’, image: ‘xlink:href’ }

Which is why your images passed to `<carousel-slide>` were not being translated.

[johnfercher]

Is possible resolve this issue? I mean, every place in Vue and Vue-Bootstrap I can use images from assets folder, just in Carousel this happens.