Failed to reference images using nextjs image component

Questions and Answers
1
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
src={photo.attributes.file.data.attributes.formats.medium.url}

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": "https://res.cloudinary.com/filipe256/image/upload/v1639711175/mama_africa_16c4d3bd90.jpg",
"alternativeText": "https://res.cloudinary.com/filipe256/image/upload/v1639711175/mama_africa_16c4d3bd90.jpg",
"caption": "https://res.cloudinary.com/filipe256/image/upload/v1639711175/mama_africa_16c4d3bd90.jpg",
"width": 3296,
"height": 3256,
"formats": {
"thumbnail": {
"name": "thumbnail_https://res.cloudinary.com/filipe256/image/upload/v1639711175/mama_africa_16c4d3bd90.jpg",
"hash": "thumbnail_mama_africa_16c4d3bd90_33475bc35c",
"ext": ".jpg",
"mime": "image/jpeg",
"width": 158,
"height": 156,
"size": 5.98,
"path": null,
"url": "https://res.cloudinary.com/filipe256/image/upload/v1640057517/thumbnail_mama_africa_16c4d3bd90_33475bc35c.jpg",
"provider_metadata": {}
},
"large": {},
"medium": {
"name": "medium_https://res.cloudinary.com/filipe256/image/upload/v1639711175/mama_africa_16c4d3bd90.jpg",
"hash": "medium_mama_africa_16c4d3bd90_33475bc35c",
"ext": ".jpg",
"mime": "image/jpeg",
"width": 750,
"height": 741,
"size": 92.45,
"path": null,
"url": "https://res.cloudinary.com/filipe256/image/upload/v1640057522/medium_mama_africa_16c4d3bd90_33475bc35c.jpg",
"provider_metadata": {
"public_id": "medium_mama_africa_16c4d3bd90_33475bc35c",
"resource_type": "image"
}
},

I’ll be grateful for your input on this.

2

If this is your api response, This should work response.data[0].attributes.file.data.attributes.formats.medium.url

3

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.

{photos.map(photo => (
                        <div key={photo.id} className="flex flex-col">
                            <Link href={`gallery/${photo.id}`}>
                                <a>
                                    <Image
                                        alt={photo.attributes.title}
                                        src={photo.data[0].attributes.file.data.attributes.formats.medium.url}
                                        width={photo.attributes.width}
                                        height={photo.attributes.height} 
                                    />
4

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.

5

@Meher_Chandan thanks again for your efforts
when I use the solution provided on <IMAGE> component
src={photo.attributes?.file?.data?.attributes?.formats?.medium?.url}
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

snapshot
snapshot1154×421 81.6 KB

1 Like
6

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