时间戳

首页 > 解决方案 > NextJs 中用于图像的 Blob

node.js - NextJs 中用于图像的 Blob

问题描述

我需要使用 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>
        </>
    )
}

第一次我不知道如何，但它的工作原理就像这里 的 图像没有显示但 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

标签： node.jsreactjsnext.js

解决方案

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

import dynamic from 'next/dynamic';

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

推荐阅读