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>