J'ai du JSON que je boucle dans mon application React. Dans le JSON que je boucle, j'ai un objet qui contient plusieurs images. Je voudrais parcourir ces images et les rendre également. Voici ce que j'ai essayé:
const locations = [
{
"name": "First Location",
"photos": [
{
"url": "http://placehold.it/250x250",
}, {
"url": "http://placehold.it/250x250",
}
]
}, {
"name": "Second Location",
"photos": [
{
"url": "http://placehold.it/250x250",
}, {
"url": "http://placehold.it/250x250",
}
]
}
]
const element = (
<div className="community-list">
{locations && locations.map((location, index) => (
<div key={index} className="location">
<h2>{location.name}</h2>
{Object.keys(location.photos).map(function(key) {
return <img src="{location.photos[url]}" />;
})}
</div>
))}
</div>
);
ReactDOM.render(element, document.getElementById('mountNode'));Cependant cela me donne 2 images cassées
1
user13286
8 nov. 2019 à 05:20
2 réponses
Meilleure réponse
Le problème réel, il y a des guillemets supplémentaires pour la balise img. Supprimez les guillemets doubles entourant les accolades. Vos images seront affichées
<img src={location.photos[url]} />
2
Gangadhar Gandi
8 nov. 2019 à 02:31
Ce que vous voulez faire, c'est ceci:
const locations = [
{
"name": "First Location",
"photos": [
{
"url": "http://placehold.it/250x250",
}, {
"url": "http://placehold.it/250x250",
}
]
}, {
"name": "Second Location",
"photos": [
{
"url": "http://placehold.it/250x250",
}, {
"url": "http://placehold.it/250x250",
}
]
}
]
const element = (
<div className="community-list">
{locations && locations.map((location, index) => (
<div key={index} className="location">
<h2>{location.name}</h2>
{location.photos.map(function(photo) {
return <img src="{photo.url}" />;
})}
</div>
))}
</div>
);
ReactDOM.render(element, document.getElementById('mountNode'));
Cela permettrait de parcourir le tableau photos d'un location, puis d'utiliser le nœud url de l'objet photo.
1
Edrian
8 nov. 2019 à 02:25