Sergii Shilingov. Components Library

Images

Images Documentation and examples for opting images (via <b-img> component) into responsive behavior (so they never become larger than their parent elements), optionally adding lightweight styles to them — all via props. See documentation.

Responsive images

<div>
  <b-img src="https://picsum.photos/1024/400/?image=41" fluid alt="Responsive image"></b-img>
</div>

Images in BootstrapVue can be made responsive with the fluid prop (which sets max-width: 100%; height: auto; via CSS classes) so that it scales with the parent element - up to the maximum native width of the image.

Fluid grow

<div>
  <h5>Small image with <code>fluid</code>:</h5>
  <b-img src="https://picsum.photos/300/150/?image=41" fluid alt="Fluid image"></b-img>

  <h5 class="my-3">Small image with <code>fluid-grow</code>:</h5>
  <b-img src="https://picsum.photos/300/150/?image=41" fluid-grow alt="Fluid-grow image"></b-img>
</div>

To make a fluid image that will grow to fill the width of its container, use the fluid-grow prop. Note this may cause blurring on small bitmap images.

Small image with `fluid`:

Small image with `fluid-grow`:

Image thumbnails

<b-container fluid class="p-4 bg-dark">
  <b-row>
    <b-col>
      <b-img thumbnail fluid src="https://picsum.photos/250/250/?image=54" alt="Image 1"></b-img>
    </b-col>
    <b-col>
      <b-img thumbnail fluid src="https://picsum.photos/250/250/?image=58" alt="Image 2"></b-img>
    </b-col>
    <b-col>
      <b-img thumbnail fluid src="https://picsum.photos/250/250/?image=59" alt="Image 3"></b-img>
    </b-col>
  </b-row>
</b-container>

You can use prop thumbnail to give an image a rounded light border appearance.

Aligning images

<div class="clearfix">
  <b-img left src="https://picsum.photos/125/125/?image=58" alt="Left image"></b-img>
  <b-img right src="https://picsum.photos/125/125/?image=58" alt="Right image"></b-img>
</div>

Align images with the boolean props left (floats left) right (floats right), and center (auto left+right margins). You can also center images by placing them in a container that has the class text-center.

Lazy loaded images

<div>
   <b-img-lazy ="mainProps" :src="getImageUrl(80)" alt="Image 1"></b-img-lazy>
   <b-img-lazy ="mainProps" :src="getImageUrl(82)" alt="Image 2"></b-img-lazy>
   <b-img-lazy ="mainProps" :src="getImageUrl(84)" alt="Image 3"></b-img-lazy>
   <b-img-lazy ="mainProps" :src="getImageUrl(85)" alt="Image 4"></b-img-lazy>
   <b-img-lazy ="mainProps" :src="getImageUrl(88)" alt="Image 5"></b-img-lazy>
   <b-img-lazy ="mainProps" :src="getImageUrl(90)" alt="Image 6"></b-img-lazy>
   <b-img-lazy ="mainProps" :src="getImageUrl(92)" alt="Image 7"></b-img-lazy>
   <b-img-lazy ="mainProps" :src="getImageUrl(94)" alt="Image 8"></b-img-lazy>
 </div>

export default {
   data() {
     return {
       mainProps: {
         center: true,
         fluidGrow: true,
         blank: true,
         blankColor: '#bbb',
         width: 600,
         height: 400,
         class: 'my-5'
       }
     }
   },
   methods: {
     getImageUrl(imageId) {
       const { width, height } = this.mainProps
       return `https://picsum.photos/${width}/${height}/?image=${imageId}`
     }
   }
 }

Use our complementary <b-img-lazy> image component (based on <b-img>) to lazy load images as they are scrolled into view (or within offset pixels of the viewport).