CODEWITHSUNDEEP
jsonvue.jsnuxt.jsstrapi
sometimes_prog
sometimes_prog

Reputation: 11

Problem getting Image URL with Strapi / Nuxt

I am trying to get the image URL from a JSON which I get from a call to my strapi content. It is for an events website. Here is the code. When I console.log the image url, i get 'undefined'. However, all other properties of event show up no problem.

created() {
axios.get('http://localhost:1338/events').then(res => {
this.events = res.data.sort((a, b) => b.date < a.date ? 1: -1);
console.log(this.events[0].image.url)
})
.catch(err => console.log(err))
}

Console: undefined

Here is the JSON:

{
    "id": 1,
    "title": "Aphex Twin Live Set",
    "description": "Risus viverra adipiscing at in tellus integer feugiat scelerisque varius.",
    "date": "2020-12-23T16:00:00.000Z",
    "price": 10,
    "published_at": "2020-12-19T17:25:44.340Z",
    "created_at": "2020-12-19T17:25:41.833Z",
    "updated_at": "2020-12-19T21:42:15.696Z",
    "image": [
        {
            "id": 1,
            "name": "aphex.jpeg",
            "alternativeText": "",
            "caption": "",
            "width": 1200,
            "height": 630,
            "formats": {
                "thumbnail": {
                    "name": "thumbnail_aphex.jpeg",
                    "hash": "thumbnail_aphex_11b34d4058",
                    "ext": ".jpeg",
                    "mime": "image/jpeg",
                    "width": 245,
                    "height": 129,
                    "size": 4.12,
                    "path": null,
                    "url": "/uploads/thumbnail_aphex_11b34d4058.jpeg"
                },
                "large": {
                    "name": "large_aphex.jpeg",
                    "hash": "large_aphex_11b34d4058",
                    "ext": ".jpeg",
                    "mime": "image/jpeg",
                    "width": 1000,
                    "height": 525,
                    "size": 28.49,
                    "path": null,
                    "url": "/uploads/large_aphex_11b34d4058.jpeg"
                },
                "medium": {
                    "name": "medium_aphex.jpeg",
                    "hash": "medium_aphex_11b34d4058",
                    "ext": ".jpeg",
                    "mime": "image/jpeg",
                    "width": 750,
                    "height": 394,
                    "size": 18.95,
                    "path": null,
                    "url": "/uploads/medium_aphex_11b34d4058.jpeg"
                },
                "small": {
                    "name": "small_aphex.jpeg",
                    "hash": "small_aphex_11b34d4058",
                    "ext": ".jpeg",
                    "mime": "image/jpeg",
                    "width": 500,
                    "height": 263,
                    "size": 10.67,
                    "path": null,
                    "url": "/uploads/small_aphex_11b34d4058.jpeg"
                }
            },
            "hash": "aphex_11b34d4058",
            "ext": ".jpeg",
            "mime": "image/jpeg",
            "size": 37.07,
            "url": "/uploads/aphex_11b34d4058.jpeg",
            "previewUrl": null,
            "provider": "local",
            "provider_metadata": null,
            "created_at": "2020-12-19T17:25:35.172Z",
            "updated_at": "2020-12-19T17:25:35.183Z"
        }
    ],
    "categories": [
        {
            "id": 1,
            "name": "Music",
            "published_at": "2020-12-19T21:18:16.946Z",
            "created_at": "2020-12-19T21:18:13.393Z",
            "updated_at": "2020-12-19T21:18:16.961Z"
        }
    ],
    "artists": [
        {
            "id": 1,
            "name": "Aphex Twin",
            "bio": "Richard James is a pretty old guy by now but he was banging in the techno/ambient electronic scene in the late 80s and 90s. He's from Cornwall so must've been pretty bored on most days, which lead him to hack at computers and electronic sound generators. The rest is history.",
            "published_at": "2020-12-19T21:42:33.225Z",
            "created_at": "2020-12-19T21:42:03.445Z",
            "updated_at": "2020-12-19T21:42:33.251Z",
            "artist_image": []
        }
    ]
}

Again -- all fields show if I console.log, but not image.url

Upvotes: 0

Views: 1091

Answers (1)

sometimes_prog
sometimes_prog

Reputation: 11

Got it -- the image field is an array because I allowed multiple media on Strapi. Had to do event.image[0].url

Upvotes: 1

Related Questions