1.1.2-fork.1 • Published 5 years ago
@upsilon/next-images v1.1.2-fork.1
Next.js + Images
Import images in Next.js (jpg, jpeg, svg, png, ico, webp and gif images)
Features
- Load images from local computer
- Load images from remote (CDN for example) by setting assetPrefix
- Inline small images to Base64 for reducing http requests
- Adds a content hash to the file name so images can get cached
If you also want image minimalization and optimization have a look at next-optimized-images
Installation
npm install --save next-images
or
yarn add next-images
Usage
Create a next.config.js
in your project
// next.config.js
const withImages = require('next-images')
module.exports = withImages()
Optionally you can add your custom Next.js configuration as parameter
// next.config.js
const withImages = require('next-images')
module.exports = withImages({
webpack(config, options) {
return config
}
})
And in your components or pages simply import your images:
export default () => <div>
<img src={require('./my-image.jpg')} />
</div>
or
import img from './my-image.jpg'
export default () => <div>
<img src={img} />
</div>
Options
assetPrefix
You can serve remote images by setting assetPrefix option.
Example usage:
// next.config.js
const withImages = require('next-images')
module.exports = withImages({
assetPrefix: 'https://example.com',
webpack(config, options) {
return config
}
})
InlineImageLimit
Inlines images with sizes below inlineImageLimit to Base64. Default value is 8192.
Example usage:
// next.config.js
const withImages = require('next-images')
module.exports = withImages({
inlineImageLimit: 16384,
webpack(config, options) {
return config
}
})
Exclude
Folders that you want to exclude from the loader. Useful for svg-react-loader
for example.
Example usage:
// next.config.js
const path = require('path');
const withImages = require('next-images')
module.exports = withImages({
exclude: path.resolve(__dirname, 'src/assets/svg'),
webpack(config, options) {
return config
}
})
1.1.2-fork.1
5 years ago