React CDN Vision
Resize, crop, and process images in the cloud, simply by changing their URLs.
Install
npm install react-cdnvisionSupport us
Star this project on GitHub.
Usage
Basic example
import { Component } from 'react';
import CDNVisionProvider, { Img } from 'react-cdnvision';
export default class Example extends Component {
render() {
return (
<CDNVisionProvider name="your-name">
<Img src="https://upload.wikimedia.org/wikipedia/commons/3/36/Cirrus_sky_panorama.jpg" alt="my image" width="200" />
</CDNVisionProvider>
);
}
}will render
<img src="http://image.cdnvision.com/your-name/https://upload.wikimedia.org/wikipedia/commons/3/36/Cirrus_sky_panorama.jpg?width=200" width="200" alt="my image" />Cover example
import { Component } from 'react';
import CDNVisionProvider, { Cover } from 'react-cdnvision';
export default class Example extends Component {
render() {
return (
<CDNVisionProvider name="your-name">
<Cover src="https://upload.wikimedia.org/wikipedia/commons/3/36/Cirrus_sky_panorama.jpg" width="1600">
<h1>This is text inside cover image</h1>
</Cover>
</CDNVisionProvider>
);
}
}will render
<div style="background-size: cover; background-position: center;background-image: http://image.cdnvision.com/your-name/https://upload.wikimedia.org/wikipedia/commons/3/36/Cirrus_sky_panorama.jpg?width=1600;">
<h1>This is text inside cover image</h1>
</div>