# Image 图片

图片容器，在保留原生img的特性下，支持懒加载，自定义占位、加载失败等。

# 基础用法

可通过fit确定图片如何适应到容器框，同原生 object-fit。

fill
contain
cover
none
scale-down 
<template>
    <div style="display: flex; flex-wrap: wrap; align-items: center;justify-content: space-around;padding: 16px">
        <div style="display: flex;flex-direction: column">
            <span>fill</span>
            <wu-plus-image style="width: 100px; height: 100px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fill"></wu-plus-image>
        </div>
        <div style="display: flex;flex-direction: column">
            <span>contain</span>
            <wu-plus-image style="width: 100px; height: 100px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="contain"></wu-plus-image>
        </div>
        <div style="display: flex;flex-direction: column">
            <span>cover</span>
            <wu-plus-image style="width: 100px; height: 100px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="cover"></wu-plus-image>
        </div>
        <div style="display: flex;flex-direction: column">
            <span>none</span>
            <wu-plus-image style="width: 100px; height: 100px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="none"></wu-plus-image>
        </div>
        <div style="display: flex;flex-direction: column">
            <span>scale-down</span>
            <wu-plus-image style="width: 100px; height: 100px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="scale-down"></wu-plus-image>
        </div>
    </div>
</template>
<script>
</script>
Expand Copy

# 占位内容

卡片可以只有内容区域。

默认
自定义
加载中...
<template>
    <div style="display: flex; align-items: center;flex-wrap: wrap;justify-content: space-around;padding: 16px">
        <div style="display: flex;flex-direction: column">
            <span>默认</span>
            <wu-plus-image style="width: 300px; height: 200px" src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" ></wu-plus-image>
        </div>

        <div style="display: flex;flex-direction: column">
            <span>自定义</span>
            <wu-plus-image style="width: 300px; height: 200px" src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg">
                <div slot="placeholder" class="image-slot" style="display: flex;justify-content: center;align-items: center; width: 100%;height: 100%;background: #f5f7fa;color: #909399;">
                    加载中<span class="dot">...</span>
                </div>
            </wu-plus-image>
        </div>
    </div>
</template>
<script>
</script>
Expand Copy

# 加载失败

默认
自定义 
<template>
    <div style="display: flex; align-items: center;flex-wrap: wrap;justify-content: space-around;padding: 16px">
        <div style="display: flex;flex-direction: column">
            <span>默认</span>
            <wu-plus-image style="width: 300px; height: 200px"></wu-plus-image>
        </div>

        <div style="display: flex;flex-direction: column">
            <span>自定义</span>
            <wu-plus-image style="width: 300px; height: 200px">
                <div slot="error" class="image-slot-error" style="display: flex;justify-content: center;align-items: center; width: 100%;height: 100%;background: #f5f7fa;color: #909399;">
                    <wu-plus-icon name="picture-outline" style="font-size: 24px"></wu-plus-icon>
                </div>
            </wu-plus-image>
        </div>
    </div>
</template>
<script>
</script>
Expand Copy

# 大图预览

可通过 previewSrcList 开启预览大图的功能。

加载中...
<template>
    <div style="display: flex; align-items: center;flex-wrap: wrap;justify-content: space-around;padding: 16px">
        <wu-plus-image preview-src-list="['https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg']" style="width: 300px; height: 200px" src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg">
            <div slot="placeholder" class="image-slot" style="display: flex;justify-content: center;align-items: center; width: 100%;height: 100%;background: #f5f7fa;color: #909399;">
                加载中<span class="dot">...</span>
            </div>
        </wu-plus-image>
    </div>
</template>
<script>
</script>
Expand Copy

# Attributes

参数 说明 类型 可选值 默认值
src 图片源，同原生 String - -
fit 确定图片如何适应容器框，同原生 object-fit String fill、contain、cover、none、scale-down --
alt 原生 alt String -- --
z-index 设置图片预览的 z-index Number -- 2000

# Event

事件名 说明 参数
error 图片加载失败触发 (event: CustomEvent) => void

# Slot

参数 说明
placeholder 占位符，一般用作图片加载中
error 加载错误占位符

Pagination 分页