Impossible to access(display) the image url from Strapi v4 with ReactJS

I have a problem with Strapi v4, I can not display the image from Strapi.

Here is the data structure in Strapi :

I tried to access the image with this source code but in vain :

I get this error :

Please help me, I am new to Strapi

If you directly goes to posts[0].data.attributes.assets.data Does you reach the data then?

No it doesn’t work.

someone can examine the structure of the data json, perhaps I am not able to map array that contains an image url, which in itself is in another array

What do you mean it don’t work?

Can’t you do console.log(posts[0].data.attributes.assets.data);

Can you post the raw json file instead of an image of the structure so I can test?

I think you didn’t do the populate, if you are on strapi v4 and you want to retriveces image data, you need to populate

1 Like

In the get request

1 Like
{
  "data": [
     {
       "id": 1,
       "attributes": {
          "title": "First Post",
          "content": "lorem ipsum",
             "assets": {
                 "data": [
                    {
                     "id": 58,
                     "attributes": {
                     "name": "ines.jpg",
                     "alternativeText": "ines.jpg",
                     "caption": "ines.jpg",
                     "width": 750,
                     "height": 422,
                       "formats": {
                           "thumbnail": {
                              "name": "thumbnail_ines.jpg", 
                              "hash": "thumbnail_ines_989144172f",
                              "ext": ".jpg",
                              "mime": "image/jpeg",
                              "width": 245,
                              "height": 138,
                              "size": 15.25,
                              "path": null,
                              "url": "https://res.cloudinary.com/ddq8no3up/image/upload/v1647025922/thumbnail_ines_989144172f.jpg",
                             "provider_metadata": {
                            "public_id": "thumbnail_ines_989144172f",
                            "resource_type": "image"
                           }
                              },
                       },
                    }
                   }
                 }
               ]
             }
          } 
       }
    ],
}

when i console.log (posts[0].data.attributes.assets.data), i get the same error

Thanks so much !

from the new version of strapi ( Strapi v4), all I had to do was to make the get request populate so I could get access to the image :

 useEffect(() => {
    axios.get("http://localhost:1337/api/articles?populate=*").then((res) => {
      setPosts(res.data);
    });
  }, []);

Ah. Yes. All related data has to be populated.

Great :smiley: cool !!

1 Like

Hi I just want to put something extra about this here. I similarly ran into this issue ran into this and solved it by add ?pupulate=* to the end of my request. This only works if you have media directly associated to the entries.

I had to create an image component in order to be able arrange image positions. So in order to get image urls from nested components you have to alter the request to access that data.

My request looks something like this.
http://localhost:1337/api/works/1?populate[images][populate]=*

Otherwise you will only be able to access the id of the images but not the urls