0

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.

enter image description here

1

1 Answer 1

2

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.

2
  • that works with the api calls, but it does not work with Javascript. I just edited my question. Apr 14, 2021 at 9:26
  • @useragent: weird. Can't check right now more precisely, but have you some more information in the response? Usually JSON:API specificies in some point of the response if some field has not been included - e.g. for missing permission. I mean, if that error is present that means the call to JSON API should be correct and the problem is somewhere else (such as permissions, but this should not be the case unless you were logged-in in postman)
    – Giuseppe
    Apr 14, 2021 at 10:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.