Header Images not showing

[5mart4zz]

I tried to use your starter, everything looks perfect but how do you use the Header Image field from your Airtable base ? If I want to have this pictures showing on the event pages, where should I add and what ? Thanks a lot

[TerabyteTiger]

This is a little tricky to handle properly (which is why I don't have it in my example)

In Event.vue you can update the page-query to be:

<page-query>
query Event ($id: ID!) {
  event: event(id: $id) {
    id
    name
    startDate
    endDate
    notes
    headerImage{
      url
    }
    attachments {
      id
      url
      filename
    }
  }
}
</page-query>

and then add an image with something like:

<img :src="$page.event.headerImage[0].url" width="400"> </img>

It is important to note that $page.event.headerImage returns an array, not the single file. Depending on exactly what you're trying to accomplish, the best approach may involve ensuring all your images uploaded to Airtable are a consistent quality/aspect ratio.