Map images from Cloudinary

Follow

Jerome Kenway

• October 04, 2021 13:47

 

Can anyone please tell me why the following code might not be displaying images. Console logs show that the array of images is being returned, but the <Image> isn't rendering on the page.

Thanks very much in advance!!!

import React, { Component } from 'react';
import { CloudinaryContext, Image } from 'cloudinary-react';
import axios from 'axios';

class Display extends Component {

  state = { images: [] };

  getImages() {
    axios.get('http://res.cloudinary.com/delpknfnx/image/list/something.json')
          .then(res => {
            console.log(res.data.resources);
            this.setState({ Images: res.data.resources});
    });
  }

  componentDidMount() {
    this.getImages();
  }

  render() {

    const { images }  = this.state;

    return (
      <div>
        hello
          <CloudinaryContext cloudName="delpknfnx">
            { images.map((data, index) => (
                <div key={index}>
                  <h2>Image</h2>
                    <Image publicId={data.public_id}></Image>
                  <div> Created at {data.created_at} </div>
                </div>
              ))
            }
          </CloudinaryContext>
      </div>
    );
  }
}

export default Display;

0

• 

  Loic Verger Del Bove

  • October 05, 2021 12:09

  Hi Jerome,

  You are using Images instead of images in your setState statement. You can how it looks like with the fix here: https://codesandbox.io/s/bitter-https-2pk6t?file=/src/App.js

  Loic

   

  0

  Comment actions Permalink
• 

  Arie Schaap

  • October 06, 2021 13:17

  Helpful,

  So if he wants to add responsiveness or any other plugins from cloudinary. How is best to add that?

  Best,

   

  Arie

  0

  Comment actions Permalink
• 

  Eyal Katz Talmon

  • October 07, 2021 14:08

  Hey Arie, 

  This section includes an example of achieving responsive images with the React v1 SDK -
  https://cloudinary.com/documentation/react_image_manipulation#responsive_image_settings

  Essentially, you'll need to add the responsive attribute, together with width and dpr set to "auto", and set the cropping mode to scale.

  By the way, I recommend you to take a look at the new React SDK v2 (currently in beta), which also supports responsive layout, and includes new features and improvements -
  https://cloudinary.com/documentation/react2_integration

  Hope this helps!

  0

  Comment actions Permalink
• 

  Jerome Kenway

  • October 14, 2021 18:06

  @Loic thanks for your help :)

   

  @Eyal, do you know the best way to achieve the same result as above with React SDK v2? Thank you!

  0

  Comment actions Permalink
• 

  Stephen Doyle

  • October 15, 2021 09:25

  Hi Jerome,

  There's a guide here with details about how the newer V2 SDK's 'responsive' plugin works - may I ask you to please try that and let us know if it works for you? 

  https://cloudinary.com/documentation/react2_integration#responsive_images

  Thanks,

  Stephen

  0

  Comment actions Permalink

Please sign in to leave a comment.