not able to show uploaded images on my screen despite images getting uploaded to cloudinary

Mohamed Soliman

September 26, 2021 15:30

I am using cloudinary in my React project to upload images, so far I have my images showing inside the cloudinary dashboard, I have the img tag in the console showing the publicId for the image, however when I refresh it gets lost.

also at some point I have managed to get the image to show however with every image upload, all the uploaded pics would change into the most current uploaded one. however now am back to the point where the publicId would show in the tag and then disappear with the image not showing

console tag : <img class="card-img-top" cloudname="dklcmfo0q" publicid="[http://res.cloudinary.com/dklcmfo0q/image/upload/v1632669928/musicimages/lzgodi4uvnoitgwwct3p.jpg](http://res.cloudinary.com/dklcmfo0q/image/upload/v1632669928/musicimages/lzgodi4uvnoitgwwct3p.jpg)" alt="Card image cap">

any help where to look ?

 

0

• 

  Francis Tagbo

  September 27, 2021 06:00

  Hi Mohamed,

  Please note that the public id is the exact path of your asset in your account. In addition, the public ID value for images and videos asset types should not include the file extension. You can learn more about public id in this guide: https://cloudinary.com/documentation/upload_images#public_id
  
  Regardgin your code, could you please try to change it like:
  <img class="card-img-top" cloudname="dklcmfo0q" publicid="musicimages/lzgodi4uvnoitgwwct3p" alt="Card image cap">
  
  May I please ask you to try this and let me know how it goes?
  
  Regards,
  Francis

  0
• 

  Mohamed Soliman

  September 27, 2021 12:57

  appreciate your response, but it's not working for some reason. I am looping through state in that div. I tried changing the image to your code but got the same response. also how to access the library in a dynamic way. in the console all pics have the same publicid

  

  0
• 

  Erwin Lukas

  September 28, 2021 01:07

  Hi Mohamed,

  The image tag should be <Image> instead of <img>
  Can you give this a try?

  <Image class="card-img-top" cloudname="dklcmfo0q" publicid="musicimages/lzgodi4uvnoitgwwct3p" alt="Card image cap" />

  Thanks,
  Erwin Lukas

  0

Post is closed for comments.