How to retrive the image url TypeError: Cannot read properties of undefined (reading 'formats')

next js image url retrival became a little tricky. can anyone suggest the retrieval process / url . i am new to strapi and nextjs.

Hello! The way to solve this issue is by including the URL of the Strapi Server to your img source.

Like this:

src={`http://localhost:1337${Pages.images.formats.thumbnail.url}`

Hope that helps :wink:

looks like i am with the CardMedia component with MUI 5 but it should not be a show stopper for this but it did not work in my way. next-sanity had some url retrieval function what is wrong now in my case.

Is it only the image that is troubling you, other objects are returned successfully?

Check if the data returned from the Pages object is not empty, or returns null. You might find that the issue is not how you access the object values

JSON.stringify(Pages, null, 2)

and it is stored as the media type.
structure is attached

This is a very weird behaviour :thinking:

Perhaps its an MUI problem. Do check the docs to make sure you used the image component correctly: Image list React component - Material UI

you are recommending ImageList while I am using CardMedia which is widely used for video and images for carousel and video libraries etc. React Card component - Material UI

I just need to know the right method of syntax from the strapi for the url of images.