面试题：Next.js中图片引用的底层原理及自定义扩展

Next.js中next/image组件加载、优化及渲染原理

加载原理：
- Next.js的next/image组件会自动处理图片的加载逻辑。它基于现代浏览器的fetch API进行图片资源的获取。对于不同环境（如SSR、CSR）都有相应的处理策略。在SSR场景下，它会预取图片相关信息，在CSR时进行实际加载。例如，如果是在服务器端渲染页面，它会根据页面布局提前准备好图片的加载路径等信息，当页面到客户端时，客户端就可以快速发起加载请求。
- 它会根据设备的屏幕分辨率和像素密度等因素，自动选择最合适的图片尺寸进行加载。比如，在高分辨率的视网膜屏设备上，它会加载更高分辨率的图片，而在普通屏幕设备上加载较低分辨率图片，这样既保证了图片质量又节省了带宽。
优化原理：
- 图片压缩：Next.js会对图片进行压缩处理，以减小图片文件的大小，从而加快加载速度。它使用诸如sharp等库在构建时对图片进行优化压缩，去除不必要的元数据等。例如，对于一张普通的JPEG图片，sharp可以在不明显降低图片质量的前提下，大幅减小图片文件的字节数。
- 自动生成不同尺寸图片：next/image会根据不同的屏幕断点和设备像素比，自动生成多种尺寸的图片。在HTML中，通过srcset属性提供多个图片源，浏览器会根据自身设备情况选择最合适的图片进行加载。例如，对于一个响应式布局的页面，在手机端、平板端和桌面端可能会显示不同尺寸的图片，next/image会自动处理这些情况。
渲染原理：
- 在渲染过程中，next/image组件会先渲染一个占位符（loading="lazy"时为懒加载占位符）。这个占位符可以是一个低分辨率的图片或者是一个简单的纯色块，以快速填充页面布局，避免布局跳动。
- 当图片加载完成后，占位符会被实际图片替换，完成图片的渲染。在替换过程中，会触发相关的过渡动画（如果有设置），使得图片的显示更加流畅自然。

扩展next/image组件实现自定义加载动画和错误处理逻辑

自定义加载动画：
- 可以利用next/image的loading属性结合CSS来实现自定义加载动画。首先，设置loading="lazy"，这样会触发懒加载机制。然后，通过CSS的::before或::after伪元素来创建加载动画。
- 例如：

.custom - image - loader::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: url('/loading - spinner.svg') center center no - repeat;
  background - size: contain;
}

import Image from 'next/image';

const CustomImage = ({ src, alt, ...rest }) => {
  return (
    <div className="custom - image - loader">
      <Image src={src} alt={alt} loading="lazy" {...rest} />
    </div>
  );
};

export default CustomImage;

错误处理逻辑：
- 利用next/image的onError属性来添加错误处理逻辑。当图片加载失败时，onError回调函数会被触发。
- 例如：

import Image from 'next/image';

const CustomImage = ({ src, alt, fallbackSrc, ...rest }) => {
  const handleError = (e) => {
    // 这里可以添加错误处理逻辑，比如显示备用图片
    e.target.src = fallbackSrc;
  };

  return (
    <Image src={src} alt={alt} onError={handleError} {...rest} />
  );
};

export default CustomImage;

通过上述方式，可以在不影响原有Next.js图片优化功能的基础上，添加自定义的加载动画和错误处理逻辑。

面试题：Next.js中图片引用的底层原理及自定义扩展

知识考点

面试题答案

Next.js中next/image组件加载、优化及渲染原理

扩展next/image组件实现自定义加载动画和错误处理逻辑