QImg

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

安装

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

用法

基础

Basic

长宽比

Custom aspect ratio

标题

Captions

图片样式

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

Custom image style

包含模式

包含模式(下面的示例)将强制显示整个图像,通常会导致图像之外的空白空间(水平或垂直)。 第二个图像不使用包含模式,用于比较目的。

Contain mode

过渡

使用basic属性来禁用过渡(并且也可以更快地渲染组件):

Transitions

加载状态

Loading state

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

Placeholder source
Error state

响应式

WARNING

要掌握sizessrcset属性,请阅读响应图像上的原生支持,因为QImg完全依赖于此

Responsive

TIP

对于sizes属性,请阅读有关分辨率切换的信息:不同的大小

TIP

对于srcset属性,请阅读有关分辨率切换的信息:相同大小,不同分辨率

QImg API

Loading API...
Please wait...