QImg 图片组件
QImg 组件可以很方便的处理响应式的图片（任何图片格式），并且还添加了一些很棒的新特性，例如加载效果、自定义长宽比等等。
QImg API
用法
基础
定义长宽比
字幕
图片样式
在下面的例子中，我们添加了和深褐色的模糊效果。此外，我们还使用了 rounded-borders CSS 辅助类。
图片适应模式
通过 fit 属性您可以有多种方式来设置图片的显示效果：‘cover’，‘fill’ （默认），‘contain’，‘none’，‘scale-down’。它基本上与 CSS 中的 object-fit 属性相同。
其中一些模式会导致图片周围出现一些空白。
您也可以通过 position 属性来设置图片的定位，它等价于 CSS 中的 object-position 属性，默认值为 “50% 50%”。
加载状态
当您有大尺寸的图片时，可以先使用一个占位符图片（建议在 base64 编码中指定），等待图片完全加载完毕后再显示真正的图片，如下例所示。
响应式
WARNING
为了更好的理解 sizes 和 srcset 属性，请参考原生组件对响应式图片的支持，因为 QImg 完全依赖于它。
TIP
基于 sizes 属性的分辨率切换方案，请参考：设置不同的尺寸。
TIP
基于 srcset 属性的分辨率切换切换方案，请参考：相同的尺寸，不同的分辨率。
按需加载
在原生支持 loading=“lazy” DOM 属性 的浏览器上，只有当图像当前显示在屏幕上时（或当图像滚动到屏幕中时） Quasar 才会通知浏览器加载并渲染图片。
另一个方案是使用 QIntersection 组件封装图片，或者使用 Intersection 指令。
禁用原生的上下文菜单
在下面的示例中，我们禁用图像上的本地上下文菜单。
WARNING
使用此选项时，请将 default 或 error 插槽的内容包裹在 div 元素中，或在元素上添加一个 all-pointer-events 类。