QImg组件使处理图像（任何图片格式）变得容易，并且与许多其他功能（例如：设置长宽比的功能）一起为图像添加了不错的加载效果。

QImg API

用法

基础

长宽比

标题

图片样式

在下面的示例中，我们添加了模糊和棕褐色效果。 此外，我们利用了rounded-bordersCSS辅助类。

fit模式

有多种方式可以通过fit属性来显示图片：‘cover’、‘fill’（默认）、‘contain’、‘none’、‘scale-down’。它基本上与CSS属性中的object-fit相同。

有些模式会导致图像之外的空隙（水平或垂直）。

你也可以通过position属性来配置位置，它相当于CSS中的object-position属性。它的默认值是 “50% 50%”。

加载状态

如果图像较大，则可以使用占位符图像（建议以base64编码指定），如以下示例所示。 占位符将一直显示，直到加载完目标图像为止。 我们正在切换QImg标签，以便您可以看到实际的占位符图像。

响应式

按需渲染

对于原生支持loading=“lazy” DOM属性的浏览器，你可以利用它。Quasar会利用它，告诉浏览器请求图片，并在图片当前显示在屏幕上时（或滚动到屏幕上时）才渲染。

一个替代方法是使用QIntersection组件作为封装器或Intersection指令。

没有原生的上下文菜单

在下面的例子中，我们关闭了图像上的原生上下文菜单。