Map images from Cloudinary
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;
-
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
-
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_settingsEssentially, 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_integrationHope this helps!
-
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
Please sign in to leave a comment.
Comments
5 comments