This library requires that you are using some image server that allows for image resizing and retaining image aspect ratio. Many use this out of the box and if you’d like to quickly get one up and running as you follow along, I recommend node-image-steam. It has a driver for file system access for local testing and can also access images in Amazon S3, and others.
SetupTo configure this component to work with your existing app, you’ll need to import and call initImages, passing an object for configuration. imageResolver is where you will take the processed image object with calculated dimensions and generate a URL that conforms to how your CMS resizes images.
The example below connects to a local instance of image-steam and will resize image based on the users viewport and pixel density.
This example shows the most basic way to integrate, for all available props and settings please view the readme
To render an image:
When this image is rendered (above the fold or almost visible), the imageResolver function will run and that will become the source of the image. Rendering an image that is perfectly scaled for its container.