Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

b-card-img-lazy

See original GitHub issue

Could <b-card-img> add lazy load support? Thanks.

I use <b-img-lazy class="card-img"> now. But have some bug on mobile device. Some image won’t load when scroll.

Issue Analytics

State:
Created 6 years ago
Comments:11 (7 by maintainers)

Top GitHub Comments

1reaction

tmorehousecommented, May 12, 2019

You would need to create the card structure as follows:

<b-card no-body>
  <b-card-img-lazy :src="content.image" top></b-card-img-lazy>
  <b-card-header tag="header">Heading here</b-card-header>
  <b-card-body :title="content.title">Body Content Here</b-card-body>
  <b-card-footer tag="footer">Footing here</b-card-footer>
</b-card>

0reactions

digitalgymcommented, May 12, 2019

How do we add the image as top? Adding the lazy component to <b-card add the image to the card body, not the outer element?

<b-card :title="content.title" header-tag="header" footer-tag="footer">
<b-card-img-lazy top="true" :src="content.image" class="card-img-top">

Top Results From Across the Web

Card | Components - BootstrapVue

Lazy loaded images ... Use the <b-card-img-lazy> sub-component to lazy load images as they scroll into view. <b-card-img-lazy> supports the same props as...

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

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 ...

Image in b-card-img-lazy component has invalid height

Hello, In my vue/cli 4/vuex / bootstrap-vue app I use b-card-img-lazy component

[Solved]-How to use <b-img-lazy> in bootstrap vue card-Vue.js

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 ...

bootstrap-vue | Yarn - Package Manager

Use props label-cols{-{breakpoint}} instead. b-img-lazy , b-card-img-lazy : now rely only on IntersectionObserver support (native or via a polyfill) to ...