QImg 组件可以轻松处理图片（任何图片格式），并提供了丰富的功能，包括延迟加载、占位符、错误状态处理等。它还能自动处理图片的长宽比，并支持响应式布局。
QImg API
用法
基础用法
长宽比
图片说明
图片样式
在下面的示例中，我们添加了模糊和棕褐色效果。此外，我们还使用了 rounded-borders CSS 辅助类。
适应模式
通过 fit 属性可以控制图片如何适应容器，有多种模式：‘cover’、‘fill’（默认）、‘contain’、‘none’、‘scale-down’。这基本上与 CSS 属性 object-fit 相同。
某些模式会在图片旁边留出空白（水平或垂直方向）。
您还可以通过 position 属性配置位置，这相当于 CSS 的 object-position 属性。其默认值是 “50% 50%”。
加载状态
当您有大尺寸图片时，您可以使用占位图片（建议使用 base64 编码指定），如下例所示。在目标图片加载完成之前，将显示占位图片。我们切换 QImg 标签，以便您可以看到占位图片的效果。
响应式
WARNING
要理解 sizes 和 srcset 属性，请阅读关于响应式图片的原生支持，因为 QImg 完全依赖于此。
TIP
关于 sizes 属性，请阅读分辨率切换：不同尺寸。
TIP
关于 srcset 属性，请阅读分辨率切换：相同尺寸，不同分辨率。
按需渲染
对于原生支持 loading=“lazy” DOM 属性 的浏览器，您可以利用此功能。Quasar 将使用它并告诉浏览器仅在图片当前显示在屏幕上（或滚动到屏幕中）时请求和渲染图片。
另一种方法是使用 QIntersection 组件作为包装器或 Intersection 指令。
禁用原生上下文菜单
在下面的示例中，我们禁用了图片上的原生上下文菜单。
WARNING
使用此选项时，请始终确保 default 或 error 插槽的内容包裹在 div 元素中，或者在元素上添加 all-pointer-events 类。