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).
用法(Usage)
¥Usage
基本(Basic)
¥Basic
宽高比(Aspect ratio)
¥Aspect ratio
标题(Captions)
¥Captions
图片样式(Image style)
¥Image style
在下面的示例中，我们添加了模糊和棕褐色效果。此外，我们使用了 rounded-borders CSS 辅助类。
¥In the example below, we add a blur and sepia effect. Furthermore, we make use of the rounded-borders CSS helper class.
适应模式(Fit mode)
¥Fit mode
通过 fit 属性，有多种方式显示图片：‘cover’、‘fill’（默认）、‘contain’、‘none’、‘scale-down’。它基本上与名为 object-fit 的 CSS 属性相同。
¥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.
你还可以通过 position 属性配置位置，该属性相当于 CSS object-position 属性。其默认值为 “50% 50%”。
¥You can also configure the position through position property, which is equivalent to the CSS object-position one. Its default value is “50% 50%”.
加载状态(Loading states)
¥Loading states
如果你有大尺寸图片，可以使用占位符图片（建议使用 base64 编码），如下例所示。占位符将一直显示，直到目标图片加载完成。我们正在切换 QImg 标签，以便你可以看到占位符图片的实际效果。
¥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.
响应式(Responsive)
¥Responsive
警告
要了解 sizes 和 srcset 属性，请阅读有关 响应式图片 的原生支持的信息，因为 QImg 完全依赖于此。
¥To grasp the sizes and srcset properties, please read about native support on responsive images because QImg relies on that entirely.
提示
对于 sizes 属性，请阅读有关分辨率切换的内容：不同大小。
¥For sizes property, please read about Resolution Switching: Different Sizes.
提示
对于 srcset 属性，请阅读有关分辨率切换的内容：大小相同，但不同分辨率。
¥For srcset property, please read about Resolution Switching: Same size, different resolutions.
按需渲染(Render on demand)
¥Render on demand
对于原生支持 loading=“lazy” DOM 属性 的浏览器，你可以利用它。Quasar 将使用它，并告知浏览器请求图片，并且仅当图片当前显示在屏幕上（或滚动到屏幕内）时才渲染它。
¥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).
一种替代方法是使用 QIntersection 组件作为封装器或 交叉布局 指令。
¥One alternative is to use the QIntersection component as a wrapper or Intersection directive.
无原生上下文菜单(No native context menu)
¥No native context menu
在下面的例子中，我们禁用了图片上的原生上下文菜单。
¥In the example below we disable the native context menu on the images.
警告
使用此选项时，请务必注意将 default 或 error 插槽的内容封装在 div 元素中，或在元素上添加 all-pointer-events 类。
¥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.