How do I get the image path inside a jsonapi response?

Question

I a content type for movies that includes plain text fields, and an image. The field name for the image is field_movie_poster.

Using the JSON API, How do I include the image path in the request?

If I put this Postman I get the correct response:

https://drupal-api.ddev.site/jsonapi/node/movies?include=image_field

But the same does not work with JavaScript

getMovies() {
    fetch('https://drupal-api.ddev.site/jsonapi/node/movies',{
        include: 'image_field'
    })
    .then(res => {
        return res.json()
    })
    .then(res => {
        
        this.movies.push(...res.data)
        console.log(res.data)

    })
    .catch(err => console.log(err))
}

How do I include the image path in the request?

If you look at the image attached, you will see that field_movie_poster is under the relationships attribute, and it does not include the image path.

Answer 1

For entity reference/images fields you have to include them to have their "full" data:

https://drupal-api.ddev.site/jsonapi/node/movies?include=image_field

The response will contain an object called included where you'll find that data,

Details for a image field:

{
  "type": "file--file",
  "id": "cc6ef625-8549-49c3-bc1c-0ef41551d8f7",
  "links": {
    "describedby": {
      "href": "drupal-api.ddev.site/jsonapi/file/file/resource/schema"
    },
    "self": {
      "href": "drupal-api.ddev.site/jsonapi/file/file/cc6ef625-8549-49c3-bc1c-0ef41551d8f7"
    }
  },
  "attributes": {
    "drupal_internal__fid": 29282,
    "langcode": "it",
    "filename": "1920x1080.jpg",
    "uri": {
      "value": "public://images/articles/2021-04/1920x1080.jpg",
      "url": "/sites/default/files/images/articles/2021-04/1920x1080.jpg"
    },
    "filemime": "image/jpeg",
    "filesize": 40767,
    "status": true,
    "created": "2021-04-13T10:22:44+00:00",
    "changed": "2021-04-13T10:22:52+00:00"
  },
  "relationships": {
    "uid": {
      "data": {
        "type": "user--user",
        "id": "c178495f-8a4c-410c-8e83-ebac79bc2162"
      },
      "links": {
        "related": {
          "href": "drupal-api.ddev.site/jsonapi/file/file/cc6ef625-8549-49c3-bc1c-0ef41551d8f7/uid"
        },
        "self": {
          "href": "drupal-api.ddev.site/jsonapi/file/file/cc6ef625-8549-49c3-bc1c-0ef41551d8f7/relationships/uid"
        }
      }
    }
  }
}

Please note you'll have to cross-check the id of that file with the id value of the image_field to get the correct file\url for each different image.