Honeycomb Design

# 图片 Image

展示和预览图片。

# 基础用法

基础用法

需要查看图片的时候，简单设置src属性，就能获得一个有预览图片功能的组件。

<title>基础用法</title>
<describe>需要查看图片的时候，简单设置<code>src</code>属性，就能获得一个有预览图片功能的组件。</describe>
<template>
    <hc-image
        width="200"
        src="/image/resource/image-example.png">    
    </hc-image>
</template>

# 错误状态

错误状态

当加载图片失败的时候显示的内容。

<title>错误状态</title>
<describe>当加载图片失败的时候显示的内容。</describe>
<template>
    <hc-image
        width="200"
        src="/image/resource/image-error.png">    
    </hc-image>
</template>

# 多图预览

多图预览

用 hc-image-preview-group 包裹 hc-image 组件即可进行多图预览。

<title>多图预览</title>
<describe>用 <code>hc-image-preview-group</code> 包裹 <code>hc-image</code> 组件即可进行多图预览。</describe>
<template>
    <hc-image-preview-group>
        <a> <hc-image
                       width="200"
                       height="100"
                       src="/image/resource/group-preview1.png">    
                   </hc-image></a>
       
        <hc-image
            width="200"
            height="100"
            src="/image/resource/group-preview2.png">    
        </hc-image>
        <hc-image
            width="200"
            height="100"
            src="/image/resource/group-preview3.png">    
        </hc-image>
        <hc-image
            width="200"
            height="100"
            src="/image/resource/group-preview4.png">    
        </hc-image>
    </hc-image-preview-group>
</template>

# API

# <image> Props

属性 说明 类型 可选值 默认值
src 图片获取地址 string -- --
width 图片显示宽度 string / number -- --
height 图片显示高度 string / number -- --
preview 是否开启预览 boolean -- true

← 提示 Alert →