如何在 main.js 文件中获取 Gridsome Image 路径

【问题标题】：How to get Gridsome Image path in the main.js file如何在 main.js 文件中获取 Gridsome Image 路径
【发布时间】：2020-08-28 23:36:18
【问题描述】：

我的网站缺少 og:image 标签，并且没有在 LinkedIn 上显示图片。解决方案是添加我添加的元标记，但是一旦项目构建并部署，图像的名称就会更改。

我正在寻找类似的东西，但是图像将被实际生成的图像路径替换，例如 g-image 中的路径

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

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

  ....
}

谢谢

【问题讨论】：

您是否尝试将图像放入static/ 文件夹？ gridsome.org/docs/directory-structure/#the-static-directory

标签： vue.js gridsome vue-meta

【解决方案1】：

我没有你的示例代码，所以我将向你展示我的博客源代码。

这很简单。假设我正在使用以下查询查询 GraphQL：

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

所以你有cover_image 你想得到真正的路径。 g-image 组件知道如何获取它：

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

但在您的代码中，您只需要访问src 属性：

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

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

  ....
}

您可以尝试在您的template 中添加一个img 元素，以确保它是正确的图像：

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

【讨论】：