CODEWITHSUNDEEP
vue.jsgridsomevue-meta
Tom Konidas
Tom Konidas

Reputation: 76

How to get Gridsome Image path in the main.js file

My website is missing og:image tags and is not showing images on LinkedIn. The solution is to Add the meta tag which I have added however once the project gets built and deployd the name of the images change.

I am looking for something liek this, but where the image would be replaced by the actual generated image path like the ones in g-image

export default function (Vue, { router, head, isClient }) {
   ....

  head.meta.push({
    name: 'image',
    property: 'og:image',
    content: './src/banner.jpg'
  })

  ....
}

Thanks

Upvotes: 1

Views: 678

Answers (1)

baruchiro
baruchiro

Reputation: 5841

I don't have your sample code, so I will show you my Blog source code.

It is simple. Let's say I'm querying the GraphQL with this query:

<page-query>
query Post ($id: ID!) {
  post: post (id: $id) {
    title
    description
    content
    cover_image (width: 860, blur: 10)
  }
}
</page-query>

So you have the cover_image you want to get the real path. The g-image components knows how to get it:

<g-image alt="Cover image" v-if="$page.post.cover_image" :src="$page.post.cover_image" />

But in your code, you just need to access to the src property:

export default function (Vue, { router, head, isClient }) {
   ....

  head.meta.push({
    name: 'image',
    property: 'og:image',
    content: this.$page.post.cover_image.src
  })

  ....
}

You can try to add a img element in your template just to make sure it is the right image:

<img :src="$page.post.cover_image.src" />

Upvotes: 0

Related Questions