增強(qiáng)版的 img 標(biāo)簽,提供多種圖片填充模式,支持圖片懶加載、加載中提示、加載失敗提示。
通過(guò)以下方式來(lái)全局注冊(cè)組件,更多注冊(cè)方式請(qǐng)參考組件注冊(cè)。
import { createApp } from 'vue';
import { Image as VanImage } from 'vant';
const app = createApp();
app.use(VanImage);
基礎(chǔ)用法與原生 ?img
? 標(biāo)簽一致,可以設(shè)置 ?src
?、?width
?、?height
?、?alt
? 等原生屬性。
<van-image
width="100"
height="100"
src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"
/>
通過(guò) ?fit
? 屬性可以設(shè)置圖片填充模式,等同于原生的 object-fit 屬性,可選值見(jiàn)下方表格。
<van-image
width="10rem"
height="10rem"
fit="contain"
src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"
/>
通過(guò) ?position
? 屬性可以設(shè)置圖片位置,結(jié)合 ?fit
? 屬性使用,等同于原生的 object-position 屬性。
<van-image
width="10rem"
height="10rem"
fit="cover"
position="left"
src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"
/>
通過(guò) ?round
? 屬性可以設(shè)置圖片變圓,注意當(dāng)圖片寬高不相等且 ?fit
? 為 ?contain
? 或 ?scale-down
? 時(shí),將無(wú)法填充一個(gè)完整的圓形。
<van-image
round
width="10rem"
height="10rem"
src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"
/>
設(shè)置 ?lazy-load
? 屬性來(lái)開(kāi)啟圖片懶加載,需要搭配 Lazyload 組件使用。
<van-image
width="100"
height="100"
lazy-load
src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"
/>
import { createApp } from 'vue';
import { Lazyload } from 'vant';
const app = createApp();
app.use(Lazyload);
?Image
? 組件提供了默認(rèn)的加載中提示,支持通過(guò) ?loading
? 插槽自定義內(nèi)容。
<van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<template v-slot:loading>
<van-loading type="spinner" size="20" />
</template>
</van-image>
?Image
? 組件提供了默認(rèn)的加載失敗提示,支持通過(guò) ?error
? 插槽自定義內(nèi)容。
<van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<template v-slot:error>加載失敗</template>
</van-image>
參數(shù) | 說(shuō)明 | 類型 | 默認(rèn)值 |
---|---|---|---|
src | 圖片鏈接 | string | - |
fit | 圖片填充模式,等同于原生的 object-fit 屬性 | string | fill
|
position v3.4.2
|
圖片位置,等同于原生的 object-position 屬性,可選值為 top right bottom left 或 string
|
string | center
|
alt | 替代文本 | string | - |
width | 寬度,默認(rèn)單位為 px
|
number | string | - |
height | 高度,默認(rèn)單位為 px
|
number | string | - |
radius | 圓角大小,默認(rèn)單位為 px
|
number | string | 0
|
round | 是否顯示為圓形 | boolean | false
|
block 3.6.3
|
是否將根節(jié)點(diǎn)設(shè)置為塊級(jí)元素,默認(rèn)情況下為 inline-block 元素 |
boolean | false
|
lazy-load | 是否開(kāi)啟圖片懶加載,須配合 Lazyload 組件使用 | boolean | false
|
show-error | 是否展示圖片加載失敗提示 | boolean | true
|
show-loading | 是否展示圖片加載中提示 | boolean | true
|
error-icon | 失敗時(shí)提示的圖標(biāo)名稱或圖片鏈接,等同于 Icon 組件的 name 屬性 | string | photo-fail
|
loading-icon | 加載時(shí)提示的圖標(biāo)名稱或圖片鏈接,等同于 Icon 組件的 name 屬性 | string | photo
|
icon-size v3.0.11
|
加載圖標(biāo)和失敗圖標(biāo)的大小 | number | string | 32px
|
icon-prefix | 圖標(biāo)類名前綴,等同于 Icon 組件的 class-prefix 屬性 | string | van-icon
|
名稱 | 含義 |
---|---|
contain | 保持寬高縮放圖片,使圖片的長(zhǎng)邊能完全顯示出來(lái) |
cover | 保持寬高縮放圖片,使圖片的短邊能完全顯示出來(lái),裁剪長(zhǎng)邊 |
fill | 拉伸圖片,使圖片填滿元素 |
none | 保持圖片原有尺寸 |
scale-down | 取 none 或 contain 中較小的一個(gè) |
事件名 | 說(shuō)明 | 回調(diào)參數(shù) |
---|---|---|
click | 點(diǎn)擊圖片時(shí)觸發(fā) | event: MouseEvent |
load | 圖片加載完畢時(shí)觸發(fā) | - |
error | 圖片加載失敗時(shí)觸發(fā) | - |
名稱 | 說(shuō)明 |
---|---|
default | 自定義圖片下方的內(nèi)容 |
loading | 自定義加載中的提示內(nèi)容 |
error | 自定義加載失敗時(shí)的提示內(nèi)容 |
組件導(dǎo)出以下類型定義:
import type { ImageFit, ImagePosition, ImageProps } from 'vant';
組件提供了下列 CSS 變量,可用于自定義樣式,使用方法請(qǐng)參考 ConfigProvider 組件。
名稱 | 默認(rèn)值 | 描述 |
---|---|---|
--van-image-placeholder-text-color | var(--van-text-color-2) | - |
--van-image-placeholder-font-size | var(--van-font-size-md) | - |
--van-image-placeholder-background | var(--van-background) | - |
--van-image-loading-icon-size | 32px | - |
--van-image-loading-icon-color | var(--van-gray-4) | - |
--van-image-error-icon-size | 32px | - |
--van-image-error-icon-color | var(--van-gray-4) | - |
在 .vue 文件中通過(guò)相對(duì)路徑引用本地圖片時(shí),需要在圖片的鏈接外包上一層 ?require()
?,將圖片 URL 轉(zhuǎn)換為 webpack 模塊請(qǐng)求,并結(jié)合 file-loader 或者 url-loader 進(jìn)行處理。
<!-- 錯(cuò)誤寫(xiě)法 -->
<van-image src="./image.png" />
<!-- 正確寫(xiě)法 -->
<van-image :src="require('./image.png')" />
對(duì)此更詳細(xì)的解釋可以參考 vue-loader 的處理資源路徑章節(jié)。
使用 Image 組件時(shí),可能會(huì)遇到將 <image> 作為標(biāo)簽名時(shí)無(wú)法渲染的問(wèn)題,比如下面的寫(xiě)法:
<template>
<image src="xxx" />
</template>
<script>
import { Image } from 'vant';
export default {
components: {
Image,
},
};
<script>
這是因?yàn)?<image> 標(biāo)簽是原生的 SVG 標(biāo)簽,Vue 不允許將原生標(biāo)簽名注冊(cè)為組件名,使用 <van-image> 即可規(guī)避這個(gè)問(wèn)題。
更多建議: