Failed to reference images using nextjs image component

System Information
  • Strapi Version: strapi v4
  • Operating System: ubuntu.20.04.3
  • Database: SQlite
  • Node Version: 6.13.1
  • NPM Version: 8.1.2
  • Yarn Version: 1.22.17

Hi team,
can someone tell me how to reference the medium-sized images from this output?

cause i’ve tried referencing it this way

but get error
TypeError: Cannot read properties of undefined (reading 'medium')

"data": [
"id": 6,
"attributes": {
"title": "mama africa",
"size": "50 x 80 cm",
"material": "floral",
"price": 450000,
"createdAt": "2021-12-13T04:40:57.992Z",
"updatedAt": "2021-12-21T03:32:08.546Z",
"file": {
"data": {
"id": 57,
"attributes": {
"name": "",
"alternativeText": "",
"caption": "",
"width": 3296,
"height": 3256,
"formats": {
"thumbnail": {
"name": "thumbnail_",
"hash": "thumbnail_mama_africa_16c4d3bd90_33475bc35c",
"ext": ".jpg",
"mime": "image/jpeg",
"width": 158,
"height": 156,
"size": 5.98,
"path": null,
"url": "",
"provider_metadata": {}
"large": {},
"medium": {
"name": "medium_",
"hash": "medium_mama_africa_16c4d3bd90_33475bc35c",
"ext": ".jpg",
"mime": "image/jpeg",
"width": 750,
"height": 741,
"size": 92.45,
"path": null,
"url": "",
"provider_metadata": {
"public_id": "medium_mama_africa_16c4d3bd90_33475bc35c",
"resource_type": "image"

I’ll be grateful for your input on this.

If this is your api response, This should work[0]

hello @Meher_Chandan thank you for taking the time to check out my errors but I still got an error after trying out your input & this is the feedback I got

TypeError: Cannot read properties of undefined (reading '0')

my goal is to display images from Cloudinary as shown in my code below.
I highly appreciate your input on this.

{ => (
                        <div key={} className="flex flex-col">
                            <Link href={`gallery/${}`}>

Oh… Now I can see what you are trying to do. Actually the solution you have written looks correct to me for given image.I would suggest one error safe approach to try.

src={photo.attributes?.file?.data?.attributes?.formats?.medium?.url || ‘’}

Also did you check if there are multiple images in your response photos object and any other image has missing formats property.

@Meher_Chandan thanks again for your efforts
when I use the solution provided on <IMAGE> component
I get error
Error: Image is missing required "src" property. Make sure you pass "src" in props to the next/image component. Received: {}

And when I use the solution provided on <img> tag
it perfectly WORKS!! which I’m going to stick with for a meantime

Below is my console output

1 Like

cool @filipe256 . whatever works is the solution :smiley: