CODEWITHSUNDEEP
vue.jsnuxt.jsbootstrap-vue
AllenC
AllenC

Reputation: 2754

How to use <b-img-lazy> in bootstrap vue card

<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

Upvotes: 2

Views: 2666

Answers (1)

Troy Morehouse
Troy Morehouse

Reputation: 5435

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.

Upvotes: 4

Related Questions