CODEWITHSUNDEEP
javascriptreactjsreststrapi
Muhammed Sahil
Muhammed Sahil

Reputation: 121

Image URL not showing on API Call Strapi v4 in single collection type

{
id: 2,
attributes: {
title: ‘Test Title’,
body: ‘Test Body’,
date: null,
createdAt: ‘2021-11-30T20:52:09.206Z’,
updatedAt: ‘2021-11-30T20:57:26.724Z’,
publishedAt: ‘2021-11-30T20:57:26.720Z’
}

Upvotes: 12

Views: 21121

Answers (5)

Nikita
Nikita

Reputation: 122

Add {?populate=*} at the end of url. Example, http://localhost:1337/api/cards?populate=*

Upvotes: 2

Akash pandey
Akash pandey

Reputation: 1

You can simply access the images in strapi V4+ by graphql query ===>

 images{
    data{
      id
      attributes{
        url
      }
    }
  }

image e.g ===>

enter image description here

Upvotes: 0

Wahid Shaikh
Wahid Shaikh

Reputation: 38

As people have mentioned above, Strapi v4 requires you to populate your request for the REST API

The REST API by default does not populate any relations, media fields, components, or dynamic zones

You can create custom queries with QS library or if you just want response to be deeper than defult levels, Try Populate Deep plugin

Upvotes: 1

BrianR.
BrianR.

Reputation: 328

I've had this struggle myself as well. And I couldn't get this working with their Query Engine & Entity Engine using Strapi 4 & Nuxtjs.

To show the images or (dynamic) components in the API, be sure to use:

http://localhost:1337/api/[your api]?populate=*

They are not shown by default unfortunately. They said:

We will not auto populate any field by default within Strapi as the purpose for not doing so is largely performance but also security as within the v4 if a role doesn’t have access to the find controller on a related content-type it is not possible to populate it.

Making this change on v4 is not possible as it would be considered breaking, but we are open to feature requests that extend past the default.

If you would wanna do this for Dynamic Zones with nested components you should do:

http://localhost:1337/api/[your api]?populate=ImagesRepeater.image

Here ImageRepeater is the name of the block and image is the field inside of the component.

If you want to achieve the same without populating this in the URL, you can find more of the docs here: https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest/populating-fields.html#population

Upvotes: 22

DontEatMyCookies
DontEatMyCookies

Reputation: 158

Strapi 4 requires you to populate your request (see: population documentation )

which could look like this (for level 2 population):

    // populate request
    const qs = require('qs')
    const query = qs.stringify(
      {
        populate: {
          Title: {
            populate: ['Image']
          }
        }
      },
      {
        encodeValuesOnly: true
      }
    )
    // get id 
    const id = yourId
    // get rquest
    const Response= await axios.get(
      `http://localhost:1337/api/[your api]/${id }/?${query}`
    )

Upvotes: 3

Related Questions