QImg 组件使处理图像（任何图片格式）变得简单，并为其添加了漂亮的加载效果以及许多其他功能（例如：设置纵横比的能力）。
用法
基础
纵横比
标题
图片样式
在下面的示例中，我们添加了模糊和棕褐色效果。此外，我们使用了 rounded-borders CSS 辅助类。
适配模式
可以通过 fit 属性以多种方式显示图像：'cover'、'fill'（默认）、'contain'、'none'、'scale-down'。它基本上与称为 object-fit 的 CSS 属性相同。
某些模式会导致图像旁边出现空白区域（水平或垂直）。
您还可以通过 position 属性配置位置，它等效于 CSS object-position 属性。其默认值为“50% 50%”。
加载状态
当您拥有大尺寸图像时，您可以使用占位符图像（建议以 base64 编码指定），如下例所示。在目标图像加载之前，将显示占位符。我们正在切换 QImg 标签，以便您可以看到占位符图像的实际效果。
响应式
警告
要理解 sizes 和 srcset 属性，请阅读有关原生支持的信息：响应式图像，因为 **QImg 完全依赖于此**。
提示
对于 sizes 属性，请阅读有关分辨率切换的信息：不同尺寸。
提示
对于 srcset 属性，请阅读有关分辨率切换的信息：相同尺寸，不同分辨率。
按需渲染
对于原生支持 loading=“lazy” DOM 属性 的浏览器，您可以利用它。Quasar 将使用它并告诉浏览器仅在当前显示图像的屏幕上（或当滚动到屏幕上时）请求图像并渲染它。
另一种选择是使用 QIntersection 组件作为包装器或 Intersection 指令。
无原生上下文菜单
在下面的示例中，我们禁用了图像上的原生上下文菜单。
警告
当您使用此选项时，始终注意将 default 或 error 插槽的内容包装在 div 元素中，或在元素上添加 all-pointer-events 类。