Next.js 如何引入图片|极客教程

Next.js 如何引入图片

在开发网站或Web应用程序时，添加图片是非常常见的需求。在Next.js中，我们可以通过几种方式来引入图片，包括使用内联数据URI、导入本地图像文件和使用外部链接。在本文中，我们将详细讨论这些方法，并说明它们的用途和示例代码。

使用内联数据URI

内联数据URI是一种在HTML中嵌入图像数据的方法，它将图像数据转换为一个Base64编码的字符串。在Next.js中，我们可以使用<img>标签并将Base64编码的字符串作为src属性的值来显示内联图像。

以下是一个示例代码，演示如何在Next.js中使用内联数据URI引入图像：

import Image from 'next/image';

const imgSrc = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAABRklEQVR4AWMAF6A7aXvJHc75hIcWGQd1blVvP2SU0nFnDCIACnCP1WBlKsUfDFW9P0hjKHXAxjJedlnaa5pQucpfo7TJQk1gwIAyUwa3I72Jc9FUc5DIMIMLEfPDiJEVpM9yTS/NL3ER4OsxSKaKTjvMNeSUuoSuuRHd5R10BEjJKyiF2hOhV2MkiufWovhBbucFRLKw1DIkuNRSMA1Fg6QtwOm2AAAAAElFTkSuQmCC';

const ImageComponent = () => (
  <div>
    <Image src={imgSrc} alt="Next.js Logo" width={200} height={200} />
  </div>
);

export default ImageComponent;

上面的代码演示了如何使用内联数据URI引入图像，并且在页面上显示了Next.js的Logo图像。这种方法适用于一些小型的图像，但不建议用于大型图像，因为Base64编码会增加图像文件的大小。

导入本地图像文件

在Next.js中，我们可以将本地图像文件放在项目的public目录下，然后通过/开头的路径来引入这些图像。这种方式相对简单且适用于大型图像。

以下是一个示例代码，演示如何在Next.js中导入本地图像文件：

import Image from 'next/image';

const ImageComponent = () => (
  <div>
    <Image src="/images/nextjs-logo.png" alt="Next.js Logo" width={200} height={200} />
  </div>
);

export default ImageComponent;

在上面的代码中，我们将nextjs-logo.png图像文件放在项目的public/images目录下，并使用相对路径来引入这个图像。然后，我们使用<Image>组件来显示这个图像。

使用外部链接

除了内联数据URI和本地图像文件之外，我们还可以使用外部链接来引入图像。这种方式适用于我们需要显示其他网站的图像或者在CDN上存储了图像文件的情况。

以下是一个示例代码，演示如何在Next.js中使用外部链接引入图像：

import Image from 'next/image';

const ImageComponent = () => (
  <div>
    <Image src="https://example.com/image.png" alt="Example Image" width={200} height={200} />
  </div>
);

export default ImageComponent;

在上面的代码中，我们使用外部链接https://example.com/image.png来引入图像，并通过<Image>组件在页面上显示这个图像。这种方式适用于我们需要引入其他网站的图像或者在CDN上存储了图像文件的情况。