QImg

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

QImg API

Loading API...
Please wait...

Usage

Basic

Basic

Aspect ratio

Custom aspect ratio

Captions

Captions

Image style

In the example below, we add a blur and sepia effect. Furthermore, we make use of the rounded-borders CSS helper class.

Custom image style

Fit mode

There are multiple ways in which the image can be displayed through the fit property: ‘cover’, ‘fill’ (default), ‘contain’, ‘none’, ‘scale-down’. It is basically the same thing as the CSS prop called object-fit.

Some modes lead to empty space (horizontally or vertically) besides the image.

You can also configure the position through position property, which is equivalent to the CSS object-position one. Its default value is “50% 50%”.

Fit modes

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.

Render on demand

For browsers that natively support the loading=“lazy” DOM attribute you can take advantage of it. Quasar will use it and tell the browser to request the image and render it only if the image is currently being displayed on screen (or when it is scrolled into the screen).

One alternative is to use the QIntersection component as a wrapper or Intersection directive.

Native lazy loading

No native context menu

In the example below we disable the native context menu on the images.

WARNING

When you are using this option always take care to have the content of the default or error slots wrapped in a div element, or add a all-pointer-events class on the element.

Native context menu