# nuke-image

> 图片

Latest version **2.3.12** (published 2019-09-26) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install nuke-image
pnpm add nuke-image
yarn add nuke-image
bun add nuke-image
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.3.12 |
| Published | 2019-09-26 |
| First published | 2017-05-17 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 41.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | leanhunter |
| Maintainers | doub, leanhunter |
| Keywords | nuke, nuke-image |

## Links

- npm: https://www.npmjs.com/package/nuke-image
- Repository: git@gitlab.alibaba-inc.com:nuke/image
- npm.io page: https://npm.io/package/nuke-image

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 2.3.12 (latest) — 2019-09-26
- 2.1.3 (beta) — 2018-08-15
- 2.3.11 — 2019-09-26
- 2.3.10 — 2019-09-26
- 2.3.9 — 2019-09-26
- 2.3.8 — 2019-09-25
- 2.3.7 — 2019-07-24
- 2.3.6 — 2019-07-19
- 2.3.5 — 2019-07-02
- 2.3.4 — 2019-05-10
- 2.3.3 — 2019-04-28
- 2.3.2 — 2019-01-15
- 2.3.1 — 2019-01-15
- 2.3.0 — 2018-11-14
- 2.2.29 — 2018-10-09
- … 46 more at https://npm.io/package/nuke-image/versions

## README

# Image

* category: UI
* chinese: 图片
* type: UI 组件

---

## 设计思路

基础组件，用于展示图片。

** 注意，在 native 端，图片必须声明宽高， 或通过 flex:1 等方式具备宽高，才能绘制，否则无法展现。**

## API

| 属性配置   | 说明                                                       | 类型                                       | 默认值    |
| :--------- | :--------------------------------------------------------- | :----------------------------------------- | :-------- |
| src        | 新增，与 source api 含义相同                               | string                                     |           |
| style      | 必须写宽高，或通过 flex:1 等能力具备宽高占位，否则无法渲染 | object                                     |           |
| resizeMode | 组件尺寸和图片尺寸不成比例的时候如何调整图片的大小         | 枚举类型，可选 `contain` `cover` `stretch` | `stretch` |
| onLoad     | 图片 onLoad 方法，其中 e.size 可返回图片真实宽高           | function(e)                                |           |

src

* 图片 url

  * 建议使用 https 协议。
  * 建议不要使用相对路径。
  * 开发阶段，您如果需要任意尺寸图片，可以使用 [placeholder 占位符服务](https://placeholder.com/), 如：

```js
<Image
  src="https://via.placeholder.com/350x150"
  style={{ width: 350, height: 150 }}
/>
```

* resizeMode 释义
  * contain : 包含，在区域内图片完全展示，不拉伸，不裁剪
  * cover : 覆盖，覆盖整个区域，可能图片本身会被部分被挡住而不显示，等比缩放，可能会裁剪
  * stretch : 拉伸，拉伸图片以撑满整个区域

<img src="https://img.alicdn.com/tfs/TB1eW.0n22H8KJjy0FcXXaDlFXa-1620-538.png" width="600" />

例：

```js
<View style={{ width: 600, height: 400 }}>
  <Image
    style={{ flex: 1 }}
    src="https://gd2.alicdn.com/imgextra/i2/413996455/TB2tNcJbd0opuFjSZFxXXaDNVXa_!!413996455.jpg"
  />
</View>
```


## 其他
- bug、建议联系 <a href="dingtalk://dingtalkclient/action/sendmsg?dingtalk_id=kjwo3w5">@翊晨</a>
- 钉钉交流群

<img src="https://img.alicdn.com/tfs/TB101EESpXXXXXFXpXXXXXXXXXX-1122-1362.jpg" width="260" />

---
_Source: https://npm.io/package/nuke-image · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._