import{o as a,a as t,y as n}from"./vue-libs.b44bc779.js";const e={class:"van-doc-markdown-body"},d=n(`

Image \u56FE\u7247

\u4ECB\u7ECD

\u589E\u5F3A\u7248\u7684 img \u6807\u7B7E\uFF0C\u63D0\u4F9B\u591A\u79CD\u56FE\u7247\u586B\u5145\u6A21\u5F0F\uFF0C\u652F\u6301\u56FE\u7247\u61D2\u52A0\u8F7D\u3001\u52A0\u8F7D\u4E2D\u63D0\u793A\u3001\u52A0\u8F7D\u5931\u8D25\u63D0\u793A\u3002

\u5F15\u5165

\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002

import { createApp } from 'vue';
import { Image as VanImage } from 'vant';

const app = createApp();
app.use(VanImage);

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

\u57FA\u7840\u7528\u6CD5\u4E0E\u539F\u751F img \u6807\u7B7E\u4E00\u81F4\uFF0C\u53EF\u4EE5\u8BBE\u7F6E src\u3001width\u3001height\u3001alt \u7B49\u539F\u751F\u5C5E\u6027\u3002

<van-image
  width="100"
  height="100"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>

\u586B\u5145\u6A21\u5F0F

\u901A\u8FC7 fit \u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u56FE\u7247\u586B\u5145\u6A21\u5F0F\uFF0C\u7B49\u540C\u4E8E\u539F\u751F\u7684 object-fit \u5C5E\u6027\uFF0C\u53EF\u9009\u503C\u89C1\u4E0B\u65B9\u8868\u683C\u3002

<van-image
  width="10rem"
  height="10rem"
  fit="contain"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>

\u56FE\u7247\u4F4D\u7F6E

\u901A\u8FC7 position \u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u56FE\u7247\u4F4D\u7F6E\uFF0C\u7ED3\u5408 fit \u5C5E\u6027\u4F7F\u7528\uFF0C\u7B49\u540C\u4E8E\u539F\u751F\u7684 object-position \u5C5E\u6027\u3002

<van-image
  width="10rem"
  height="10rem"
  fit="cover"
  position="left"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>

\u5706\u5F62\u56FE\u7247

\u901A\u8FC7 round \u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u56FE\u7247\u53D8\u5706\uFF0C\u6CE8\u610F\u5F53\u56FE\u7247\u5BBD\u9AD8\u4E0D\u76F8\u7B49\u4E14 fit \u4E3A contain \u6216 scale-down \u65F6\uFF0C\u5C06\u65E0\u6CD5\u586B\u5145\u4E00\u4E2A\u5B8C\u6574\u7684\u5706\u5F62\u3002

<van-image
  round
  width="10rem"
  height="10rem"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>

\u56FE\u7247\u61D2\u52A0\u8F7D

\u8BBE\u7F6E lazy-load \u5C5E\u6027\u6765\u5F00\u542F\u56FE\u7247\u61D2\u52A0\u8F7D\uFF0C\u9700\u8981\u642D\u914D Lazyload \u7EC4\u4EF6\u4F7F\u7528\u3002

<van-image
  width="100"
  height="100"
  lazy-load
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>

import { createApp } from 'vue';
import { Lazyload } from 'vant';

const app = createApp();
app.use(Lazyload);

\u52A0\u8F7D\u4E2D\u63D0\u793A

Image \u7EC4\u4EF6\u63D0\u4F9B\u4E86\u9ED8\u8BA4\u7684\u52A0\u8F7D\u4E2D\u63D0\u793A\uFF0C\u652F\u6301\u901A\u8FC7 loading \u63D2\u69FD\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002

<van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg">
  <template v-slot:loading>
    <van-loading type="spinner" size="20" />
  </template>
</van-image>

\u52A0\u8F7D\u5931\u8D25\u63D0\u793A

Image \u7EC4\u4EF6\u63D0\u4F9B\u4E86\u9ED8\u8BA4\u7684\u52A0\u8F7D\u5931\u8D25\u63D0\u793A\uFF0C\u652F\u6301\u901A\u8FC7 error \u63D2\u69FD\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002

<van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg">
  <template v-slot:error>\u52A0\u8F7D\u5931\u8D25</template>
</van-image>

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
src\u56FE\u7247\u94FE\u63A5string-
fit\u56FE\u7247\u586B\u5145\u6A21\u5F0F\uFF0C\u7B49\u540C\u4E8E\u539F\u751F\u7684 object-fit \u5C5E\u6027stringfill
position v3.4.2\u56FE\u7247\u4F4D\u7F6E\uFF0C\u7B49\u540C\u4E8E\u539F\u751F\u7684 object-position \u5C5E\u6027\uFF0C\u53EF\u9009\u503C\u4E3A top right bottom left \u6216 stringstringcenter
alt\u66FF\u4EE3\u6587\u672Cstring-
width\u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A pxnumber | string-
height\u9AD8\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A pxnumber | string-
radius\u5706\u89D2\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A pxnumber | string0
round\u662F\u5426\u663E\u793A\u4E3A\u5706\u5F62booleanfalse
block 3.6.3\u662F\u5426\u5C06\u6839\u8282\u70B9\u8BBE\u7F6E\u4E3A\u5757\u7EA7\u5143\u7D20\uFF0C\u9ED8\u8BA4\u60C5\u51B5\u4E0B\u4E3A inline-block \u5143\u7D20booleanfalse
lazy-load\u662F\u5426\u5F00\u542F\u56FE\u7247\u61D2\u52A0\u8F7D\uFF0C\u987B\u914D\u5408 Lazyload \u7EC4\u4EF6\u4F7F\u7528booleanfalse
show-error\u662F\u5426\u5C55\u793A\u56FE\u7247\u52A0\u8F7D\u5931\u8D25\u63D0\u793Abooleantrue
show-loading\u662F\u5426\u5C55\u793A\u56FE\u7247\u52A0\u8F7D\u4E2D\u63D0\u793Abooleantrue
error-icon\u5931\u8D25\u65F6\u63D0\u793A\u7684\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027stringphoto-fail
loading-icon\u52A0\u8F7D\u65F6\u63D0\u793A\u7684\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027stringphoto
icon-size v3.0.11\u52A0\u8F7D\u56FE\u6807\u548C\u5931\u8D25\u56FE\u6807\u7684\u5927\u5C0Fnumber | string32px
icon-prefix\u56FE\u6807\u7C7B\u540D\u524D\u7F00\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 class-prefix \u5C5E\u6027stringvan-icon

\u56FE\u7247\u586B\u5145\u6A21\u5F0F

\u540D\u79F0\u542B\u4E49
contain\u4FDD\u6301\u5BBD\u9AD8\u7F29\u653E\u56FE\u7247\uFF0C\u4F7F\u56FE\u7247\u7684\u957F\u8FB9\u80FD\u5B8C\u5168\u663E\u793A\u51FA\u6765
cover\u4FDD\u6301\u5BBD\u9AD8\u7F29\u653E\u56FE\u7247\uFF0C\u4F7F\u56FE\u7247\u7684\u77ED\u8FB9\u80FD\u5B8C\u5168\u663E\u793A\u51FA\u6765\uFF0C\u88C1\u526A\u957F\u8FB9
fill\u62C9\u4F38\u56FE\u7247\uFF0C\u4F7F\u56FE\u7247\u586B\u6EE1\u5143\u7D20
none\u4FDD\u6301\u56FE\u7247\u539F\u6709\u5C3A\u5BF8
scale-down\u53D6 none \u6216 contain \u4E2D\u8F83\u5C0F\u7684\u4E00\u4E2A

Events

\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
click\u70B9\u51FB\u56FE\u7247\u65F6\u89E6\u53D1event: MouseEvent
load\u56FE\u7247\u52A0\u8F7D\u5B8C\u6BD5\u65F6\u89E6\u53D1-
error\u56FE\u7247\u52A0\u8F7D\u5931\u8D25\u65F6\u89E6\u53D1-

Slots

\u540D\u79F0\u8BF4\u660E
default\u81EA\u5B9A\u4E49\u56FE\u7247\u4E0B\u65B9\u7684\u5185\u5BB9
loading\u81EA\u5B9A\u4E49\u52A0\u8F7D\u4E2D\u7684\u63D0\u793A\u5185\u5BB9
error\u81EA\u5B9A\u4E49\u52A0\u8F7D\u5931\u8D25\u65F6\u7684\u63D0\u793A\u5185\u5BB9

\u7C7B\u578B\u5B9A\u4E49

\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A

import type { ImageFit, ImagePosition, ImageProps } from 'vant';

\u4E3B\u9898\u5B9A\u5236

\u6837\u5F0F\u53D8\u91CF

\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002

\u540D\u79F0\u9ED8\u8BA4\u503C\u63CF\u8FF0
--van-image-placeholder-text-colorvar(--van-text-color-2)-
--van-image-placeholder-font-sizevar(--van-font-size-md)-
--van-image-placeholder-background-colorvar(--van-background-color)-
--van-image-loading-icon-size32px-
--van-image-loading-icon-colorvar(--van-gray-4)-
--van-image-error-icon-size32px-
--van-image-error-icon-colorvar(--van-gray-4)-

\u5E38\u89C1\u95EE\u9898

\u5982\u4F55\u5F15\u7528\u672C\u5730\u56FE\u7247\uFF1F

\u5728 .vue \u6587\u4EF6\u4E2D\u901A\u8FC7\u76F8\u5BF9\u8DEF\u5F84\u5F15\u7528\u672C\u5730\u56FE\u7247\u65F6\uFF0C\u9700\u8981\u5728\u56FE\u7247\u7684\u94FE\u63A5\u5916\u5305\u4E0A\u4E00\u5C42 require()\uFF0C\u5C06\u56FE\u7247 URL \u8F6C\u6362\u4E3A webpack \u6A21\u5757\u8BF7\u6C42\uFF0C\u5E76\u7ED3\u5408 file-loader \u6216\u8005 url-loader \u8FDB\u884C\u5904\u7406\u3002

<!-- \u9519\u8BEF\u5199\u6CD5 -->
<van-image src="./image.png" />

<!-- \u6B63\u786E\u5199\u6CD5 -->
<van-image :src="require('./image.png')" />

\u5BF9\u6B64\u66F4\u8BE6\u7EC6\u7684\u89E3\u91CA\u53EF\u4EE5\u53C2\u8003 vue-loader \u7684\u5904\u7406\u8D44\u6E90\u8DEF\u5F84\u7AE0\u8282\u3002

\u4F7F\u7528 image \u6807\u7B7E\u65E0\u6CD5\u6E32\u67D3\uFF1F

\u4F7F\u7528 Image \u7EC4\u4EF6\u65F6\uFF0C\u53EF\u80FD\u4F1A\u9047\u5230\u5C06 <image> \u4F5C\u4E3A\u6807\u7B7E\u540D\u65F6\u65E0\u6CD5\u6E32\u67D3\u7684\u95EE\u9898\uFF0C\u6BD4\u5982\u4E0B\u9762\u7684\u5199\u6CD5\uFF1A

<template>
  <image src="xxx" />
</template>

<script>
import { Image } from 'vant';

export default {
  components: {
    Image,
  },
};
<script>

\u8FD9\u662F\u56E0\u4E3A <image> \u6807\u7B7E\u662F\u539F\u751F\u7684 SVG \u6807\u7B7E\uFF0CVue \u4E0D\u5141\u8BB8\u5C06\u539F\u751F\u6807\u7B7E\u540D\u6CE8\u518C\u4E3A\u7EC4\u4EF6\u540D\uFF0C\u4F7F\u7528 <van-image> \u5373\u53EF\u89C4\u907F\u8FD9\u4E2A\u95EE\u9898\u3002

`,22),l=[d],h={__name:"README.zh-CN",setup(p,{expose:s}){return s({frontmatter:{}}),(o,r)=>(a(),t("div",e,l))}};export{h as default};