图片正在上传到 Cloudinary 但未显示在我的 React 应用程序中答案

【问题标题】：Images are being uploaded on Cloudinary but not displaying in my React App图片正在上传到 Cloudinary 但未显示在我的 React 应用程序中
【发布时间】：2022-01-14 05:21:58
【问题描述】：

我正在开发一个 React 图库应用程序，我已经使用 NodeJs 将图像上传到 Cloudinary，但我无法从我的帐户访问它们以在图库应用程序中显示它们。在我的控制台中，我不断收到错误消息和损坏的图像图标。我尝试了几种不同的方法来使用以下代码在 myImage 变量中写入路由，但没有任何变化。

const myImage = cld.image('publicid.<ext>');

const myImage = cld.image('folder/publicid.<ext>');

//任何关于如何解决这个问题的想法都非常感谢。我已经包含了错误消息的图片和我的应用程序的当前显示

import React from 'react';
import { AdvancedImage } from '@cloudinary/react';
import { Cloudinary } from '@cloudinary/url-gen';
import { fill } from "@cloudinary/url-gen/actions/resize";



const Home =()=>{
const cld = new Cloudinary({
    cloud: {
        cloudName: 'demo',  //Your account Cloudinary_Name  
    }
});

const myImage = cld.image('public_id');

myImage.resize(fill().width(300).height(200));

  return(
     <div>
      <AdvancedImage  cldImg= {myImage} />
      </div>
  )

};

 export default Home;

【问题讨论】：

图片的public_id 是public_id，您应该将其中一张图片的public_id 放在其中。您可以尝试sample 或South%20Korea_Image%20Gallery/lvi6kgfocamcggp4soeg，这是您帐户中的图像。此外，请确保将云设置为 diarrmhtt 而不是 demo。

标签： reactjs file-upload error-handling cloudinary

【解决方案1】：

您是否使用demo 作为您的云名称？如果是这样，请将 cloudName 更改为您的 cloudinary 仪表板中的那个。

出于调试目的，您是否介意控制台记录图像变量返回的内容并共享结果以获得进一步帮助？

【讨论】：