next-imagesNext.js 图像导入工具

next-images 可用于在 Next.js 中 导入图像，默认为 jpg、jpeg、png、svg、fig、ico、webp、jp2 和 avif 。

特征

• 从本地计算机加载图像


• 通过设置 assetPrefix ，从远程（例如 CDN）加载图像


• 将小图像内联到 Base64 以减少 http 请求


• 向文件名添加内容哈希，以便缓存图像

用法

在项目中创建一个 next.config.js：

// next.config.js

const withImages = require('next-images')

module.exports = withImages()

可以选择添加自定义 Next.js 配置作为参数：

// next.config.js

const withImages = require('next-images')

module.exports = withImages({

  webpack(config, options) {

    return config

  }

})

在组件或页面中简单地导入图像:

export default () => <div>

  <img src={require('./my-image.jpg')} />

</div>

或者

import img from './my-image.jpg'



export default () => <div>

  <img src={img} />

</div>