react-image-resizer

react-image-resizer is a React component that resizes the image to be nice.

Installation

# use npm
$ npm install -D react-image-resizer

# use yarn
$ yarn add -D react-image-resizer
Sh

Usage

import React from 'react';
import Image from 'react-image-resizer';

class App extends React.Component {
  render() {
    return (
      <div>
        <Image
          src="path/to/image.jpg"
          height={ /*resize height*/ }
          width={ /*resize width*/ }
        />
      </div>
    );
  }
}
JavaScript

Examples

<Image
  src="path/to/image.jpg"
  width={240}
  height={240}
  style={style.image}
/>
const style = {
  image: {
    border: '1px solid #ccc',
    background: '#fefefe',
  },
};
JavaScript
Horizontally long case Vertically long case disable image
Horizontally Vertically noimage

Options

name required type default description
src true String Path to your image
alt false String Image description
height true Number 0 Height after resize (px only)
width true Number 0 Width after resize (px only)
style false object Wrapper style of image
noImageSrc false String Path when image could not be acquired
noImageAlt false String 'noimage' description when image could not be acquired

GitHub

react-image-resizer is a React component that resizes the image to be nice.Read More

Latest commit to the master branch on 3-29-2025
Download as zip