Question 393057 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How do i implement image rendering with an external asset cloud like cloudinary?

I am trying to hos tmy pictures on cloudinary and then render them on my UI component

I have tried rendering it from the imagage folder in the application
I am trying to hos tmy pictures on cloudinary and then render them on my UI component

I have tried rendering it from the imagage folder in the application
I am trying to hos tmy pictures on cloudinary and then render them on my UI component

I have tried rendering it from the imagage folder in the application
I am trying to hos tmy pictures on cloudinary and then render them on my UI component

I have tried rendering it from the imagage folder in the application
I am trying to hos tmy pictures on cloudinary and then render them on my UI component

ljfnl

Tags:

2

Answers


  1. 0

    You can add the source of the image directly as the cloundinary image link.

    Example:

    <img src="your_image_url" alt="bg-img"></img>

    And as a good practice you can add the image url to a constants file rather than directly hard coding it to the image tag.

    Login or Signup to reply.
  2. 0

    Since you mentioned UI Component, I believe you maybe talking about Cloudinary’s AdvancedImage react component. Here’s a quick example on how to use it.
    In the code example below, pass the image’s public_id:

      // Use the image with public ID, 'front_face'.
  const myImage = cld.image('front_face');

    Then call the AdvancedImage component like so:

      // Render the transformed image in a React component.
  return (
    <div>
      <AdvancedImage cldImg={myImage} />
    </div>
  )

    public_id‘s definition is a unique identifier of the asset, including the folder structure if relevant. If you have saved the image "red_sneaker" in "shoes" folder, and your account type is a fixed-folder account (non-dynamic), then the public_id for this example should be shoes/red_sneaker. If, however, your account is a dynamic folder, then the public_id is red_sneaker (omitting the folder prefix).

    Here’s the reference page: https://cloudinary.com/documentation/video_manipulation_and_delivery#transformation_url_structure

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search