QImg 组件可以轻松处理图片（任何图片格式），并提供了丰富的功能，包括延迟加载、占位符、错误状态处理等。它还能自动处理图片的长宽比，并支持响应式布局。
QImg API
用法
基础用法
长宽比
图片说明
图片样式
在下面的示例中，我们添加了模糊和棕褐色效果。此外，我们还使用了 rounded-borders CSS 辅助类。
适应模式
通过 fit 属性可以控制图片如何适应容器，有多种模式：‘cover’、‘fill’（默认）、‘contain’、‘none’、‘scale-down’。这基本上与 CSS 属性 object-fit 相同。
某些模式会在图片旁边留出空白（水平或垂直方向）。
您还可以通过 position 属性配置位置，这相当于 CSS 的 object-position 属性。其默认值是 “50% 50%”。
加载状态
当您有大尺寸图片时，您可以使用占位图片（建议使用 base64 编码指定），如下例所示。在目标图片加载完成之前，将显示占位图片。我们切换 QImg 标签，以便您可以看到占位图片的效果。
响应式
要理解 sizes 和 srcset 属性，请阅读关于响应式图片的原生支持，因为 QImg 完全依赖于此。
关于 sizes 属性，请阅读分辨率切换：不同尺寸。
关于 srcset 属性，请阅读分辨率切换：相同尺寸，不同分辨率。
禁用原生上下文菜单
在下面的示例中，我们禁用了图片上的原生上下文菜单。
使用此选项时，请始终确保 default 或 error 插槽的内容包裹在 div 元素中，或者在元素上添加 all-pointer-events 类。
服务端渲染 v2.32+
在 SSR/SSG 中，只要你已声明了 QImg 盒子的形状（即设置了 ratio、initial-ratio 或 height 中的任意一个），QImg 就会把 <img> 放进服务端 HTML 中。这样浏览器会在解析 HTML 时——远早于水合——就发现并获取图片，并像原生 <img> 一样在图片到达时就绘制它。只有当页面完成水合时图片仍在加载，才会显示加载状态（spinner 或 loading 插槽）；对于已经加载完毕的图片，load/error 事件会在水合时发出。
如果这三者都没有设置，盒子在图片的自然比例已知之前会使用默认的 16:9 比例，因此服务端渲染的图片会在水合时明显改变形状。为此 QImg 会将这类图片延迟到水合时才渲染，除非你设置 ssr-prerender 并接受这种盒子形状变化。
对于首屏（above-the-fold）图片，请同时设置 loading="eager" 和 fetchpriority="high"，这样浏览器就不会延迟其获取。
无障碍访问 v2.25+
QImg 的包裹元素带有 role="img"，其无障碍名称取自 alt 属性——对于任何承载含义的图片都请提供 alt。对于纯装饰性图片，请设置 alt=""，就像你在原生 <img> 上所做的那样：此时包裹元素不再声明任何 role（img role 需要一个名称），屏幕阅读器会跳过它。完全省略 alt 效果相同。注意加载和错误状态的变化不会被播报给辅助技术。