@_nu/react-img

react-img React component

Usage no npm install needed!

<script type="module">
  import NuReactImg from 'https://cdn.skypack.dev/@_nu/react-img';
</script>

README

react-img

npm package github

Enhance vanilla image of the responsive and ability on error.

增强 img 标签的自适应和错误占位能力。

how to use

import React from 'react'
import {render} from 'react-dom';
import NuImg from "@_nu/react-img";

function Demo() {
    return (
        <div>
            <h2>react-img Demo</h2>
            <p>Enhance the responsive of the vanilla image.</p>
            <h3>⬇️ img Vallina ⬇️</h3>
            <NuImg width={60} height={80} alt="bookCover" src="https://placem.at/places?w=120&h=160"/>
            <NuImg circle width={60} height={60} alt="avatar" src="https://placem.at/places?w=120&h=120"/>
            <NuImg width={60} height={80} src="./error.png" alt="bookCover"/>
            <h3>⬇️ img custom errorBg ⬇️</h3>
            <NuImg errorBg width={60} height={80} src="./error.png" alt="bookCover"/>
            <NuImg errorBg="#dddddd" width={60} height={80} src="./error.png" alt="bookCover"/>
            <h3>⬇️ img responsive ⬇️</h3>
            <NuImg responsive width={60} height={60} src="https://placem.at/places?w=300&h=300" alt="bookCover"/>
            <h3>⬇️ img responsive y ⬇️</h3>
            <NuImg responsive="y" width={60} height={40} alt="bookCover" src="https://placem.at/places?w=200&h=400"/>
            <h3>⬇️ img responsive x ⬇️</h3>
            <NuImg responsive="x" width={80} height={70} alt="bookCover" src="https://placem.at/places?w=400&h=200"/>
        </div>
    )
}
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;;