Failed to reference image using nextjs img component

Questions and Answers
1

Hi Team,
can someone tell me how to reference the images from this output?

{
    "data": [
        {
            "id": 11,
            "attributes": {
                "text": "Which color do you like best?",
                "createdAt": "2022-06-16T15:11:17.425Z",
                "updatedAt": "2022-07-09T08:29:02.862Z",
                "publishedAt": "2022-06-16T15:11:19.025Z",
                "slug": "1",
                "Text": [
                    {
                        "id": 1,
                        "Option_answer": "Blue",
                        "Answer_image": {
                            "data": {
                                "id": 14,
                                "attributes": {
                                    "name": "https://upload.wikimedia.org/wikipedia/commons/e/e4/Color-blue.JPG",
                                    "alternativeText": "https://upload.wikimedia.org/wikipedia/commons/e/e4/Color-blue.JPG",
                                    "caption": "https://upload.wikimedia.org/wikipedia/commons/e/e4/Color-blue.JPG",
                                    "width": 512,
                                    "height": 384,
                                    "formats": {
                                        "small": {
                                            "ext": ".JPG",
                                            "url": "/uploads/small_Color_blue_9d367bd795.JPG",
                                            "hash": "small_Color_blue_9d367bd795",
                                            "mime": "image/jpeg",
                                            "name": "small_https://upload.wikimedia.org/wikipedia/commons/e/e4/Color-blue.JPG",
                                            "path": null,
                                            "size": 1.42,
                                            "width": 500,
                                            "height": 375
                                        },
                                        "thumbnail": {
                                            "ext": ".JPG",
                                            "url": "/uploads/thumbnail_Color_blue_9d367bd795.JPG",
                                            "hash": "thumbnail_Color_blue_9d367bd795",
                                            "mime": "image/jpeg",
                                            "name": "thumbnail_https://upload.wikimedia.org/wikipedia/commons/e/e4/Color-blue.JPG",
                                            "path": null,
                                            "size": 0.46,
                                            "width": 208,
                                            "height": 156
                                        }
                                    },
                                    "hash": "Color_blue_9d367bd795",
                                    "ext": ".JPG",
                                    "mime": "image/jpeg",
                                    "size": 1.42,
                                    "url": "/uploads/Color_blue_9d367bd795.JPG",
                                    "previewUrl": null,
                                    "provider": "local",
                                    "provider_metadata": null,
                                    "createdAt": "2022-06-08T17:58:35.591Z",
                                    "updatedAt": "2022-06-08T17:58:35.591Z"
                                }
                            }
                        }
                    },
2

iterate trough the data like you would with any json format?

text.$id.Anwser_image.$id(maybe require a const fromout a function here).attributes.formats.small.url

I think your potential issue might lie in that the img component refs need an additional argument to search for the right data object (of which there could be more off seeing the id in “anwser_image”