I can't load images from Flamelink that is integrated with Firebase and Vue

Question

Right now, the code is working for all the strings I passed however, I can't retrieve my images from storage and see the fieldId needed. I followed the documentation of flamelink-js-sdk but it doesn't seem to clarify what should be done for images.

Here's a sample of my code:

async created() {
app.content
  .get({
    schemaKey: "teamPage",
    populate: [
      {
        field: "title"
      },
      {
        field: "description"
      },
      {
        field: "executiveBoard",
        fields: [
          "title",
          "position",
          "image",
          "facebook",
          "github",
          "linkedin"
        ]
      }
    ]
  })
  .then(teamPage => {
    this.teamPage = teamPage;
    console.log(this.teamPage.executiveBoard[0].image);
  })
  .catch(error => console.log(error));},

Here's where I render them

 <team-circle
        v-for="board in teamPage.executiveBoard"
        :key="board.title"
        class="col-12 col-sm-12 col-md-4"
        :name="board.title"
        :image="board.image"
        :facebook="board.facebook"
        :linkedin="board.linkedin"
        :github="board.github"
      >{{ board.position }}</team-circle>

Check this link to see what data is passed in the src of the img tag

Thank you again. Hope you can help me out on this!

Answer 1

You can do the following

app.content
  .get({
    schemaKey: "teamPage",
    populate: [
      {
        field: "title"
      },
      {
        field: "description"
      },
      {
        field: "executiveBoard",
        fields: [
          "title",
          "position",
          "image",
          "facebook",
          "github",
          "linkedin"
        ],
        populate: ["image"]
      }
    ]
  })

note the populate: ["image"] addition (see this)

this.teamPage.executiveBoard[0].image will now be an array of objects example

[{ 
  contentType: "image/png",
  id: "xxx",
  ...
  url: "https://firebasestorage.googleapis.com/v0/b/....."
}]

you can then access the url for example like this

this.teamPage.executiveBoard[0].image[0].url