QImg 图片组件
QImg 组件可以很方便的处理响应式的图片（任何图片格式），并且还添加了一些很棒的新特性，例如加载效果、自定义长宽比等等。
QImg API
QImg API
props
26
slots
3
events
2
behavior
9
miscellaneous
2
model
5
style
10
loading
: String
说明
延迟加载或立即加载；与 <img> 的 loading 属性语法相同
loading-show-delay
: Number | String
v2.14.6+
说明
延迟显示加载动画，直到图片更改；给浏览器一些时间从缓存中加载图片，以防止不必要地闪烁加载动画；数值应表示毫秒
crossorigin
: String
说明
与 <img> 元素的 crossorigin 属性相同的语法
decoding
: String
说明
与 <img> 解码属性相同的语法
referrerpolicy
: String
说明
与 <img> 的 referrerpolicy 属性相同的语法
fetchpriority
: String
v2.6.6+
说明
提供了一个相对优先级的提示，用于在获取图像时使用。
no-spinner
: Boolean
说明
在等待图像加载时不显示默认的加载动画；如果存在 'loading' 插槽，则会被覆盖。
no-native-menu
: Boolean
说明
禁用图像的原生上下文菜单
no-transition
: Boolean
说明
在切换旧图像和新图像之间禁用默认过渡效果
用法
基础
基础
Template
Script
All
<template>
<div class="q-pa-md q-gutter-sm">
<q-btn push color="teal" label="Change image" @click="refresh" />
<q-img
:src="url"
spinner-color="white"
style="height: 140px; max-width: 150px"
/>
</div>
</template>Copied to clipboard
定义长宽比
自定义长宽比
Template
<template>
<div class="q-pa-md">
<div class="q-col-gutter-md row items-start">
<div class="col-4">
Ratio: 16/9
<q-img
src="https://picsum.photos/500/300"
:ratio="16/9"
/>
</div>
<div class="col-4">
Ratio: 1
<q-img
src="https://picsum.photos/500/300"
:ratio="1"
/>
</div>
<div class="col-4">
Ratio: 4/3
<q-img
src="https://picsum.photos/500/300"
:ratio="4/3"
/>
</div>
</div>
</div>
</template>Copied to clipboard
Ratio: 16/9
Ratio: 1
Ratio: 4/3
字幕
字幕
Template
<template>
<div class="q-pa-md">
<div class="q-col-gutter-md row items-start">
<div class="col-6">
<q-img src="https://cdn.quasar.dev/img/parallax2.jpg">
<div class="absolute-bottom text-subtitle1 text-center">
Caption
</div>
</q-img>
</div>
<div class="col-6">
<q-img src="https://cdn.quasar.dev/img/parallax2.jpg">
<div class="absolute-top text-center">
Caption
</div>
</q-img>
</div>
<div class="col-6">
<q-img src="https://cdn.quasar.dev/img/parallax2.jpg">
<div class="absolute-bottom-right text-subtitle2">
Caption
</div>
</q-img>
</div>
<div class="col-6">
<q-img src="https://cdn.quasar.dev/img/parallax2.jpg">
<div class="absolute-full text-subtitle2 flex flex-center">
Caption
</div>
</q-img>
</div>
</div>
</div>
</template>Copied to clipboard
图片样式
在下面的例子中，我们添加了和深褐色的模糊效果。此外，我们还使用了 rounded-borders CSS 辅助类。
自定义图片样式
Template
Style
All
<template>
<div class="q-pa-md">
<q-img
src="https://cdn.quasar.dev/img/parallax2.jpg"
spinner-color="white"
style="height: 170px; max-width: 300px"
img-class="my-custom-image"
class="rounded-borders"
>
<div class="absolute-bottom text-subtitle1 text-center">
Caption
</div>
</q-img>
</div>
</template>Copied to clipboard
图片适应模式
通过 fit 属性您可以有多种方式来设置图片的显示效果：‘cover’，‘fill’ （默认），‘contain’，‘none’，‘scale-down’。它基本上与 CSS 中的 object-fit 属性相同。
其中一些模式会导致图片周围出现一些空白。
您也可以通过 position 属性来设置图片的定位，它等价于 CSS 中的 object-position 属性，默认值为 “50% 50%”。
图片适应模式
Template
Script
All
<template>
<div class="q-pa-md">
<div class="q-gutter-md row items-start">
<q-img
v-for="mode in fitModes"
:key="mode"
src="https://picsum.photos/500/300"
style="max-width: 300px; height: 150px;"
:fit="mode"
>
<div class="absolute-bottom text-subtitle1 text-center">
{{ mode }}
</div>
</q-img>
</div>
</div>
</template>Copied to clipboard
加载状态
加载状态
Template
Script
All
<template>
<div class="q-pa-md">
<q-btn push color="teal" label="Change image" @click="refresh" class="q-mb-md" />
<div class="q-gutter-sm row items-start">
<q-img
:src="url"
spinner-color="red"
style="height: 140px; max-width: 150px"
/>
<q-img
:src="url"
spinner-color="primary"
spinner-size="82px"
style="height: 140px; max-width: 150px"
/>
<q-img
:src="url"
style="height: 140px; max-width: 150px"
>
<template v-slot:loading>
<div class="text-subtitle1 text-white">
Loading...
</div>
</template>
</q-img>
<q-img
:src="url"
style="height: 140px; max-width: 150px"
>
<template v-slot:loading>
<q-spinner-gears color="white" />
</template>
</q-img>
<q-img
:src="url"
style="height: 140px; max-width: 150px"
>
<template v-slot:loading>
<div class="text-yellow">
<q-spinner-ios />
<div class="q-mt-md">Loading...</div>
</div>
</template>
</q-img>
</div>
</div>
</template>Copied to clipboard
当您有大尺寸的图片时，可以先使用一个占位符图片（建议在 base64 编码中指定），等待图片完全加载完毕后再显示真正的图片，如下例所示。
占位符资源
Template
Script
All
<template>
<div class="q-pa-md q-gutter-md">
<q-btn
push
color="teal"
label="Toggle"
@click="toggle"
/>
<!-- using v-if so you can see the effect -->
<q-img
v-if="url !== null"
:src="url"
:ratio="1"
class="q-mt-md"
style="width: 150px"
placeholder-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWBAMAAADOL2zRAAAAG1BMVEXMzMyWlpaqqqq3t7fFxcW+vr6xsbGjo6OcnJyLKnDGAAAACXBIWXMAAA7EAAAOxAGVKw4bAAABAElEQVRoge3SMW+DMBiE4YsxJqMJtHOTITPeOsLQnaodGImEUMZEkZhRUqn92f0MaTubtfeMh/QGHANEREREREREREREtIJJ0xbH299kp8l8FaGtLdTQ19HjofxZlJ0m1+eBKZcikd9PWtXC5DoDotRO04B9YOvFIXmXLy2jEbiqE6Df7DTleA5socLqvEFVxtJyrpZFWz/pHM2CVte0lS8g2eDe6prOyqPglhzROL+Xye4tmT4WvRcQ2/m81p+/rdguOi8Hc5L/8Qk4vhZzy08DduGt9eVQyP2qoTM1zi0/uf4hvBWf5c77e69Gf798y08L7j0RERERERERERH9P99ZpSVRivB/rgAAAABJRU5ErkJggg=="
/>
</div>
</template>Copied to clipboard
加载错误状态
Template
Script
All
<template>
<div class="q-pa-md">
<q-img
src="https://cdn.quasar.dev/img/non-existent-image-src.png"
style="height: 140px; max-width: 150px"
>
<template v-slot:error>
<div class="absolute-full flex flex-center bg-negative text-white">
Cannot load image
</div>
</template>
</q-img>
</div>
</template>Copied to clipboard
响应式
WARNING
为了更好的理解 sizes 和 srcset 属性，请参考原生组件对响应式图片的支持，因为 QImg 完全依赖于它。
响应式
Template
<template>
<div class="q-pa-md">
<div class="q-gutter-md row items-start">
<q-img
src="https://cdn.quasar.dev/img/image-src.png"
srcset="https://cdn.quasar.dev/img/image-1x.png 300w,
https://cdn.quasar.dev/img/image-2x.png 2x,
https://cdn.quasar.dev/img/image-3x.png 3x,
https://cdn.quasar.dev/img/image-4x.png 4x"
style="height: 280px; max-width: 300px"
>
<div class="absolute-bottom text-body1 text-center">
With srcset
</div>
</q-img>
<q-img
src="https://cdn.quasar.dev/img/image-src.png"
srcset="https://cdn.quasar.dev/img/image-1x.png 400w,
https://cdn.quasar.dev/img/image-2x.png 800w,
https://cdn.quasar.dev/img/image-3x.png 1200w,
https://cdn.quasar.dev/img/image-4x.png 1600w"
sizes="(max-width: 400px) 400w,
(min-width: 400px) and (max-width: 800px) 800w,
(min-width: 800px) and (max-width: 1200px) 1200w,
(min-width: 1200px) 1600w"
style="height: 280px; max-width: 300px"
>
<div class="absolute-bottom text-body1 text-center">
With srcset & sizes
</div>
</q-img>
</div>
</div>
</template>Copied to clipboard
TIP
基于 sizes 属性的分辨率切换方案，请参考：设置不同的尺寸。
TIP
基于 srcset 属性的分辨率切换切换方案，请参考：相同的尺寸，不同的分辨率。
按需加载
在原生支持 loading=“lazy” DOM 属性 的浏览器上，只有当图像当前显示在屏幕上时（或当图像滚动到屏幕中时） Quasar 才会通知浏览器加载并渲染图片。
另一个方案是使用 QIntersection 组件封装图片，或者使用 Intersection 指令。
原生按需加载
Template
<template>
<div class="q-pa-md q-gutter-sm">
<q-img
src="https://picsum.photos/500/300"
loading="lazy"
spinner-color="white"
height="140px"
style="max-width: 150px"
/>
</div>
</template>Copied to clipboard
禁用原生的上下文菜单
在下面的示例中，我们禁用图像上的本地上下文菜单。
WARNING
使用此选项时，请将 default 或 error 插槽的内容包裹在 div 元素中，或在元素上添加一个 all-pointer-events 类。
Native context menu
Template
<template>
<div class="q-pa-md">
<div class="q-col-gutter-md row items-start">
<div class="col-6">
<q-img src="https://cdn.quasar.dev/img/parallax2.jpg" no-native-menu>
<div class="absolute-bottom text-subtitle1 text-center">
Caption
</div>
</q-img>
</div>
<div class="col-6">
<q-img src="https://cdn.quasar.dev/img/parallax2.jpg" no-native-menu>
<div class="absolute-top text-center">
Caption
</div>
</q-img>
</div>
<div class="col-6">
<q-img src="https://cdn.quasar.dev/img/parallax2.jpg" no-native-menu>
<div class="absolute-bottom-right text-subtitle2">
Caption
</div>
</q-img>
</div>
<div class="col-6">
<q-img src="https://cdn.quasar.dev/img/parallax2.jpg" no-native-menu>
<q-icon class="absolute all-pointer-events" size="32px" name="info" color="white" style="top: 8px; left: 8px">
<q-tooltip>
Tooltip
</q-tooltip>
</q-icon>
</q-img>
</div>
</div>
</div>
</template>Copied to clipboard
版权声明 本中文文档内容版权为站长个人所有，保留所有权利。
免责声明 本站点所包含的任何跳转链接均为第三方广告内容，站点对这些广告内容的准确性、合法性、真实性不承担任何责任。用户点击跳转链接进入第三方网站后，应自行判断广告内容的真实性和合法性，并自行承担因使用广告内容而产生的风险和责任。任何因使用第三方广告内容而导致的损失或损害，本站点概不负责。