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).
/* * No installation step is necessary. * It gets installed by default by @quasar/app v2+. */
Image style v1.4+
In the example below, we add a blur and sepia effect. Furthermore, we make use of the
rounded-borders CSS helper class.
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.
basic property which disables transitions (and it also renders the component faster):
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.
To grasp the
srcset properties, please read about native support on responsive images because QImg relies on that entirely.
sizes property, please read about Resolution Switching: Different Sizes.
srcset property, please read about Resolution Switching: Same size, different resolutions.
Native context menu v1.8.4+
In the example below we enable native context menu on the images.
When you are using this option always take care to have the content of the
error slots wrapped in a
div element, or add a
all-pointer-events class on the element.