next-imagesNext.js 圖像導(dǎo)入工具

next-images 可用于在 Next.js 中 導(dǎo)入圖像，默認(rèn)為 jpg、jpeg、png、svg、fig、ico、webp、jp2 和 avif 。

特征

• 從本地計算機(jī)加載圖像
• 通過設(shè)置 assetPrefix ，從遠(yuǎn)程（例如 CDN）加載圖像
• 將小圖像內(nèi)聯(lián)到 Base64 以減少 http 請求
• 向文件名添加內(nèi)容哈希，以便緩存圖像

用法

在項目中創(chuàng)建一個 next.config.js：

// next.config.js
const withImages = require('next-images')
module.exports = withImages()

可以選擇添加自定義 Next.js 配置作為參數(shù)：

// next.config.js
const withImages = require('next-images')
module.exports = withImages({
  webpack(config, options) {
    return config
  }
})

在組件或頁面中簡單地導(dǎo)入圖像:

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

或者

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

export default () => <div>
  <img src={img} />
</div>