Skip to content
Import images in Next.js (supports jpg, jpeg, svg, png and gif images)
Branch: master
Clone or download
Latest commit 73b4992 Jun 12, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore upgrade file-loader to version 3 Dec 22, 2018
README.md Fix typo on Exclude example Mar 6, 2019
index.js Resolve loaders relative to next-images Jun 10, 2019
package-lock.json 1.1.2 Jun 11, 2019
package.json 1.1.2 Jun 11, 2019
yarn.lock upgrade dependencies Jun 11, 2019

README.md

Next.js + Images

npm npm npm

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
  }
})
You can’t perform that action at this time.