NextJs 中用于图像的 Blob

Question

我需要使用 next 和 node 作为后端等技术将图像 url 添加为 blob。

首先我尝试使用简单的方法来创建我需要的东西。

const ErrorMsg = (props) => {
    const image = "/logo.png";
    const blob = new Blob([image], {type: 'image/png'})
    const img = URL.createObjectURL(blob);
    return (
        <>
            <div className={classes.errorMsg}>
                <img src={img} />
            </div>
        </>
    )
}

第一次我不知道如何，但它就像here 中的图像没有显示但 webpack 也没有给出错误。

我忘记了它是如何损坏的，但是在我使用一些代码操作尝试修复它之后出现了这个错误。

Blob is not defined.

我认为需要一个额外的包，所以我安装了node-blob

import Blob from "node-blob";

const ErrorMsg = (props) => {
    const image = "/logo.png";
    const blob = new Blob([image], {type: 'image/png'})
    const img = URL.createObjectURL(blob);
    return (
        <>
            <div className={classes.errorMsg}>
                <img src={img} />
            </div>
        </>
    )
}

所以现在我收到了这个错误URL.createObjectURL is not a function

Answer 1

如果您想在 blob 文件中使用next/image 组件，您可以在组件上设置unoptimized 属性，Blob URL 驻留在内存中，因此它是临时的，不需要优化。

https://nextjs.org/docs/api-reference/next/image#unoptimized

Answer 2

更好的方法是使用动态导入来导入组件：

import dynamic from 'next/dynamic';

const MyComponentNoSSR = dynamic(() => import('./MyComponentNoSSR'), {
  ssr: false,
});

Answer 3

URL 和 Blob 都是 Web API 的一部分，因此在应用的服务器端不可用。

如果你需要同时使用它们，你应该在useEffect中使用它们，这只会在客户端触发。

import { useState, useEffect } from 'react';

const ErrorMsg = (props) => {
    const image = "/logo.png";
    const [src, setSrc] = useState(''); // initial src will be empty

    useEffect(() => {
      const blob = new Blob([image], {type: 'image/png'})
      const img = URL.createObjectURL(blob);

      setSrc(img); // after component is mount, src will change
    }, []);

    return (
        <>
            <div className={classes.errorMsg}>
                <img src={src} />
            </div>
        </>
    )
}

也就是说，您是否有理由需要创建 Blob？您可以通过将静态文件存储在名为 public 的文件夹下来为 Next.js 提供静态文件，如 here 所述。