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

Discussions
1

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

Here is the data structure in Strapi :

json-data
json-data1517Ă—1463 186 KB

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

codesource
codesource1718Ă—2262 397 KB

I get this error :

error
error1656Ă—462 82.4 KB

Please help me, I am new to Strapi

2

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

3

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

4

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?

5

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
6

In the get request

1 Like
7 
{
  "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"
                           }
                              },
                       },
                    }
                   }
                 }
               ]
             }
          } 
       }
    ],
}
8

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

9

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);
    });
  }, []);
2 Likes
10

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

11

Great :smiley: cool !!

1 Like
12

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

2 Likes
13

Al alternative for populating is using populate deep:

14

This is how I was able to get the images:

  const evtImages = evt.image.data;

  const newImg = evtImages.map((img) => {
    return img.attributes.formats.thumbnail.url;
  });

  const imgString = newImg.toString();

I then passed imgString to my JSX:

<Image
          src={evt.image ? imgString : "/images/event-default.png"}
          width={170}
          height={100}
        />

I know that’s a lot of typing but It worked fine.