NextJs 中用于图像的 Blob

Question

我需要使用 next 和节点作为后端等技术将图像 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

两者 URL and Blob 都是网络的一部分 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.

所述

Answer 2

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

import dynamic from 'next/dynamic';

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

Answer 3

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

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

NextJs 中用于图像的 Blob

Blob in NextJs for images

node.js

reactjs

next.js