Nectar of the Programming Masses

npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript.Learn more »

next-images

1.1.1 • Public • Published

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
  }
})

Keywords

none

install

npm i next-images

Downloadsweekly downloads

25,143

version

1.1.1

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability