2
<b-card overlay
  :title="name"
  :sub-title="subtitle"
  :img-src="cardImg"
  img-top
  style="max-width: 20rem;"
  class="mb-2 insider-image"
  ref="card">
</b-card>

I'm currently rendering a huge file of image to my card's background. How can I use the b-img-lazy insider the card

AllenC
  • 2,754
  • 1
  • 41
  • 74
  • You mean you want the card's background image to load lazily? – Yom T. Feb 07 '19 at 03:55
  • @jom there's already a component in bootstrap vue that does lazy loading which is but if this is not usable within card, then yes how can I load images lazily? – AllenC Feb 07 '19 at 05:44
  • I'm sure you have tried putting this `` component inside of the ``, but didn't that work? – Yom T. Feb 07 '19 at 06:07
  • I can add the `` inside `` but it's not treating as the background image of the card. it treats as a content. – AllenC Feb 07 '19 at 07:01
  • Looks like you're gonna need to implement this feature yourself, have a look at [this post](/a/13655739/3634538). It's for jQuery, but the point is you just need to add a listener on `load` event. – Yom T. Feb 07 '19 at 07:18

1 Answers1

4

Use the new b-card-img-lazy sub-component. You will still need to manually place the sub-component inside <b-card no-body> and palce any additional sub components needed to build up the cafrd (i.e. <b-card-body>, etc).

Refer to the "Kitchen Sink" example of the b-card docs page. it shows placing a regular <b-card-img> sub-component, which could be changed to a <b-card-img-lazy> sub-component.

Troy Morehouse
  • 5,320
  • 1
  • 27
  • 38