nextjs的Image对象如何获取图片内容

在 Next.js 中使用 `next/image` 组件，可以通过 `src` 属性指定图片的 URL 地址来显示图片。但是，如果你想获取图片的二进制内容，可以使用 `fetch` 函数从该 URL 地址获取图片内容。

以下是一个获取图片内容的示例代码：

import { useState, useEffect } from 'react';

function ImageContent({ src }) {
  const [imageContent, setImageContent] = useState(null);

  useEffect(() => {
    async function fetchImageContent() {
      const response = await fetch(src);
      const blob = await response.blob();
      setImageContent(blob);
    }

    fetchImageContent();
  }, [src]);

  if (!imageContent) {
    return <div>Loading...</div>;
  }

  return <img src={URL.createObjectURL(imageContent)} />;
}

在上面的代码中，我们使用 `useState` 和 `useEffect` 钩子来获取图片的二进制内容。在 `useEffect` 钩子中，我们使用 `fetch` 函数从指定的 `src` 地址获取图片的内容，并将其转换为 `Blob` 对象。然后，我们将 `Blob` 对象设置为 `imageContent` 状态值。在 `return` 语句中，我们使用 `URL.createObjectURL` 函数将 `Blob` 对象转换为 URL 地址，并将其传递给 `img` 元素的 `src` 属性，以显示图片。