QImg

The QImg component makes working with images easy and also adds a nice loading effect to it along with many other features (example: the ability to set an aspect ratio).

Installation


// quasar.conf.js

return {
  framework: {
    components: [
      'QImg'
    ]
  }
}

Usage

Basic



Options

Custom aspect ratio



Captions



Contain mode (example below) will force-show the whole image, which usually leads to empty space (horizontally or vertically) besides the image. The second image doesn’t uses the contain mode and it’s there for comparison purposes.

Contain mode



Use the basic property which disables transitions (and it also renders the component faster):

Transitions



Image loading states

Loading state



When you have big-sized images, you can use a placeholder image (recommended to be specified in base64 encoding) like in the example below. The placeholder will be displayed until the target image gets loaded. We’re toggling the QImg tag so you can see the placeholder image in action.

Placeholder source



Error state



Responsive

WARNING

To grasp the sizes and srcset properties, please read about native support on responsive images because QImg relies on that entirely.

Responsive



TIP

For sizes property, please read about Resolution Switching: Different Sizes.

TIP

For srcset property, please read about Resolution Switching: Same size, different resolutions.

QImg API