Next.js + Images 技术文档

Next.js + Images 技术文档

next-images Import images in Next.js (supports jpg, jpeg, svg, png and gif images) 项目地址: https://gitcode.com/gh_mirrors/ne/next-images

安装指南

要开始在您的Next.js项目中使用Next.js + Images库，您需要执行以下命令之一来安装该依赖：

npm install --save next-images

或者如果您偏好Yarn作为包管理器：

yarn add next-images

这将把next-images添加到您的项目依赖中，并为您准备好图像处理的功能。

项目使用说明

配置next.config.js

为了启用图片的自动加载和处理功能，您需要创建或修改项目的next.config.js文件并引入next-images配置。一个基本的设置看起来像这样：

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

图片导入

一旦配置完成，您就可以在组件或页面中直接通过require语句或直接导入的方式使用图片：

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

// 或者通过import声明
import img from './my-image.jpg';
export default () => <div><img src={img} /></div>;

API使用文档

Next.js + Images库提供了几个可配置的选项，以适应不同的需求：

• assetPrefix: 设置此选项可以服务于远程图像（如CDN）。例如：

  assetPrefix: 'https://example.com',
  

• dynamicAssetPrefix: 设为true以支持动态资产前缀。

• inlineImageLimit: 控制转换为Base64编码的小图像大小阈值，默认是8KB，可通过以下方式调整：

  inlineImageLimit: 16384,
  

• exclude: 指定不需要通过此插件处理的文件夹路径。

• fileExtensions: 自定义要处理的文件扩展名列表。

• name: 改变生成文件的命名规则，例如：

  name: "[name].[hash:base64:8].[ext]",
  

• esModule: 控制是否生成ES模块格式的输出，默认关闭。若开启，需改变图片引入方式。

与Next.js内置图像组件配合使用

当与next/image组件一起使用时，注意基础的Base64内联不被支持。若需禁用内联处理，可设置：

inlineImageLimit: false,

TypeScript注意事项

对于TypeScript项目，需要在类型定义文件中包含next-images的引用，确保类型兼容：

• 创建additional.d.ts文件并添加/// <reference types="next-images" />。
• 更新tsconfig.json以包含这个定义文件。

这就是Next.js + Images库的基本使用和配置方法，它可以极大地简化您项目中的图像处理流程，提供更高效的内容分发和优化。

next-images Import images in Next.js (supports jpg, jpeg, svg, png and gif images) 项目地址: https://gitcode.com/gh_mirrors/ne/next-images