https://github.com/calvin-ll/react-responsive-images-example
React with responsive images
https://github.com/calvin-ll/react-responsive-images-example
Last synced: 11 months ago
JSON representation
React with responsive images
- Host: GitHub
- URL: https://github.com/calvin-ll/react-responsive-images-example
- Owner: Calvin-LL
- Created: 2020-11-30T18:27:38.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-01-05T13:01:48.000Z (over 3 years ago)
- Last Synced: 2023-03-04T04:51:36.751Z (over 3 years ago)
- Language: JavaScript
- Homepage: https://react-responsive-images-example.netlify.app
- Size: 1.94 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Responsive Images Example
[**Live Demo**](https://react-responsive-images-example.netlify.app)
This example uses three webpack loaders: [webpack-image-srcset-loader](https://github.com/Calvin-LL/webpack-image-srcset-loader), [webpack-image-resize-loader](https://github.com/Calvin-LL/webpack-image-resize-loader), and [webpack-image-placeholder-loader](https://github.com/Calvin-LL/webpack-image-placeholder-loader)
### [webpack-image-srcset-loader](https://github.com/Calvin-LL/webpack-image-srcset-loader) and [webpack-image-resize-loader](https://github.com/Calvin-LL/webpack-image-resize-loader)
These two loaders generate a `srcset` string with images of different sizes and the corresponding resized and optimized images. Smaller screens will load smaller images, improving load time.
### [webpack-image-placeholder-loader](https://github.com/Calvin-LL/webpack-image-placeholder-loader)
This loader generates a color for each image, you can use the color as a placeholder before the image loads.
## Project setup
```
npm install
```
### Run development server
```
npm run serve
```
### Compile
```
npm run build
```