下一个JS/Rect:Cloudinary错误:无法添加属性__，对象不可扩展

Question

我正在尝试在NextJS应用程序中从Cloudinary加载媒体(图像和视频(，我遵循API文档，我的代码与文档中的示例基本相同。

我的代码：

import { Cloudinary } from "@cloudinary/url-gen";
import { AdvancedImage as Image } from "@cloudinary/react";
interface CloudinaryMediaProps {
id?: string;
}
export const CloudinaryMedia: FC<CloudinaryMediaProps> = () => {
const myCld = new Cloudinary({
cloud: {
cloudName: "cloudinary-workspace",
},
});
const myImage = myCld.image("image");
return (
<div>
<Image cldImg={myImage} />
</div>
);
};

通过这个简单的例子，我得到了以下错误：

Unhandled Runtime Error
TypeError: Cannot add property __, object is not extensible

Cloudinary错误：无法添加属性__，对象不可扩展

有人知道我如何解决这个错误吗？或者如果我错过了什么？

Answer 1

以下Cloudinary软件包必须安装在您的环境中：

• @cloudinary/ul-gen
• @cloudinary/react

有关工作示例代码，请参阅此处：https://replit.com/@ecptest/AdvanceImageTest#pages/cldfrontendsdk.tsx

import { Cloudinary } from "@cloudinary/url-gen";
import { AdvancedImage as Image } from "@cloudinary/react";
interface CloudinaryMediaProps {
id?: string;
}
export const CloudinaryMedia: React.FC<CloudinaryMediaProps> = () => {
const myCld = new Cloudinary({
cloud: {
cloudName: "demo",
},
});
const myImage = myCld.image("sample");
myImage.format("jpg");
return (
<div>
<Image cldImg={myImage} />
</div>
);
};

此外，您还需要在Cloudinary注册一个帐户(即。，对于参数cloudName = <cloudinary_cloud_name>(。

此外，还需要使用媒体库帐户中已经可用的资产的public_id，这是资产的唯一标识符，在将资产上传到您的Cloudinary帐户时指定，或者由Cloudinary自动分配(有关指定公共id的各种选项的更多详细信息，请参阅上传图像(。它还可以被划分为用于更结构化的传递URL的文件夹，这可以通过用斜线(/(分隔元素来实现。

const myImage = myCld.image("<public_id>");