npm package: @pluve/lego-image
Description: lego系列之 Image 组件
Author: Otto
Latest version: 0.0.2

<!--
 * @Author       : 黄震 huangzhen@yfpharmacy.com
 * @Date         : 2023-07-13 20:11:25
 * @LastEditors  : 黄震 huangzhen@yfpharmacy.com
 * @LastEditTime : 2023-07-24 19:56:53
 * @Description  : 描述
 * Copyright (c) 2023 by 益丰大药房连锁股份有限公司, All Rights Reserved.
-->

# @pluve/pdf-preview-vue

lego 系列之图片预览组件

<!-- [![npm (scoped)](https://img.shields.io/npm/v/@pluve/lego-table-vue?style=for-the-badge)](https://www.npmjs.com/package/@pluve/lego-table-vue) -->

# feature

- 页面内图片展示；
- 点击弹框预览；
- 支持原图、大图、中图、小图、精准调参 5 种图片展示模式；
- 支持图片懒加载；
- 支持自动转 webp 格式；
- 支持阿里云和华为云图片指令；

# usage

```html
<template>
  <LegoImage v-bind="ossLegoImageProps" />
</template>
<script setup lang="ts">
  const ossLegoImageProps = computed<ILegoImageProps>(() => ({
    src: '',
    width: `200px`,
    height: `200px`,
    objectFit: 'cover',
    compressionMode: 'large',
    customInstruction: '',
    objectStorageServiceProvider: 'OSS',
    enableAutoOrientation: false,
    blur: [0, 0],
    rotate: 0,
    enablePreview: true,
    style: {
      borderRadius: '10px',
      backgroundColor: '#f5f5f5',
      border: 'solid 1px #e8e8e8',
    },
  }));
</script>
```

# Properties

| Property                     | Type                                         | Description                                                                    | Default  |
| ---------------------------- | -------------------------------------------- | ------------------------------------------------------------------------------ | -------- |
| alt                          | string?                                      | 图片描述                                                                       | ""       |
| src                          | string                                       | 图片地址，支持传图片 base64                                                    | -        |
| placeholder                  | string?                                      | 图片占位图片地址，支持传图片 base64                                            | -        |
| fallback                     | string?                                      | 异常兜底展示图片，支持传图片 base64                                            | -        |
| width                        | string \| number \| undefined                | 图片宽度                                                                       | -        |
| height                       | string \| number \| undefined                | 图片高度                                                                       | -        |
| className                    | string?                                      | 图片样式类                                                                     | -        |
| style                        | CSSProperties \| undefined                   | 图片行内样式                                                                   | -        |
| compressionMode              | ImageMode \| undefined                       | 图片压缩模式，默认原图模式，small: 100，middle: 300，large: 600                | original |
| customInstruction            | string?                                      | 自定义压缩指令，在`compressionMode`为'custom'时生效                            | ""       |
| enablePreview                | boolean?                                     | 是否启用图片预览能力，开启后点击图片即可预览，默认预览图片原图（转 webp 格式） | false    |
| objectFit                    | ObjectFit?                                   | 图片内容适配模式，参考 image object-fit                                        | cover    |
| objectStorageServiceProvider | ObjectStorageServiceProvider                 | 对象存储服务厂商，目前支持阿里云 oss 和华为云 obs                              | -        |
| enableLazyLoading            | boolean?                                     | 是否开启懒加载，默认开启                                                       | true     |
| enableAutoOrientation        | boolean?                                     | 是否开启自适应方向，默认开启                                                   | true     |
| blur                         | [radius: number, standardDeviation: number]? | 模糊效果，第一个参数为模糊半径[1,50]，第二个参数为标准差[1,50]                 | -        |
| rotate                       | number?                                      | 旋转角度，默认 0                                                               | 0        |

# dependencies

- [ant-design-vue](https://antdv.com/docs/vue/introduce)
- [vue3.x]()