图片

### 基础用法
<div class="textDiv">

![](/media/202404/2024-04-29_180142_504743.png)

------------
图片展示

------------
代码示例如下
```html
<template>
    <div>
       <hi-image  style="width:200px;height:200px" :url="src"  v-bind="prop"></hi-image>
    </div>
</template>

}
};
</script>
```

</div>

### Attributes

| 参数               | 说明                         | 类型                   | 可选值                                        | 默认值                                 |
|------------------|----------------------------|----------------------|--------------------------------------------|-------------------------------------|
| url              | 图片源                        | string               |                                            |                                     |
| fit              | 确定图片如何适应容器框,同原生 object-fit | string               | fill / contain / cover / none / scale-down |                                     |
| alt              | 原生 alt                     | string               |                                            |                                     |
| lazy             | 是否开启懒加载                    | boolean              |                                            | false                               |
| scroll-container | 开启懒加载后，监听 scroll 事件的容器     | string / HTMLElement |                                            | 最近一个 overflow 值为 auto 或 scroll 的父元素 |
| preview          | 开启图片预览功能                   | boolean              |                                            | false                               |
| zIndex           | 设置图片预览的 z-index            | Number               |                                            | 2000                                |
| width            | 宽度                         | Number               |                                            | 100                                 |
| height           | 高度                         | Number               |                                            | 100                                 |

</style>