@_nu/react-img 中文文档教程

Question

# react-img [![npm package][npm-badge]][npm] [![github][github-badge]][github] [npm-badge]: https://img.shields.io/npm/v/@_nu/react-img.svg [npm]: https://www.npmjs.org/package/@_nu/react-img [github-badge]: https://img.shields.io/github/stars/nu-system/react-img.svg?style=social [github]: https://github.com/nu-system/react-img Enhance vanilla image of the responsive and ability on error. 增强 `img` 标签的自适应和错误占位能力。 ## how to use ```JSX import React from 'react' import {render} from 'react-dom'; import NuImg from "@_nu/react-img"; function Demo() { return (

react-img Demo

Enhance the responsive of the vanilla image.

⬇️ img Vallina ⬇️

⬇️ img custom errorBg ⬇️

⬇️ img responsive ⬇️

⬇️ img responsive y ⬇️

⬇️ img responsive x ⬇️

) } export default Demo; ``` ## Vanilla Img Api | props | 类型 | 默认值 | 功能 | |:-----|:-----:|:-----:|:-----:| | src | string | required | img src | | alt | string | required | img alt | | width | string, number | required | img width | | height | string, number | required | img height | Just the `img` api but the `width` and `height` is required. ## Enhance Api | props | 类型 | 默认值 | 功能 | |:-----|:-----:|:-----:|:-----:| | errorBg | base64Url, color | 8*8 base64 transparent png | 图片加载失败显示 | | circle | bool | false | img `border-radius:100%` | | responsive | bool,'x','y' | false | 图片是否自适应 | ### `responsive` - `false`: render img directly; - `true`: img stretch fill the box; - `x`: img `width:100%; height:initial;`; - `y`: img `height:100%; width:initial;`;