Vue.js 如何使用后封面图像作为twitter的卡片图像

我试图使用Gridsome创建一个包含当前帖子封面图像的页面，但该图像没有显示在卡片中

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

<script>
export default {
  metaInfo () {
    return {
      title: this.$page.post.title,
      meta: [{
        property: 'og:image',
        content: this.$refs.coverImage? this.$refs.coverImage.src : (this.$page.meta.siteUrl + '/logo/LOGO.png')
      }]
    }
  }
}
</script>

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

...
...
导出默认值{
metaInfo（）{
返回{
标题：this.$page.post.title，
元：[{
属性：“og:image”，
内容：this.$refs.coverImage？this.$refs.coverImage.src:（this.$page.meta.siteUrl+'/logo/logo.png'）
}]
}
}
}
查询帖子（$id:id！）{
职位：职位（id:$id）{
标题
路径
封面图像（宽度：860，模糊度：10）
},
元数据：元数据{
站点URL
},
}

由于

g-image

知道如何解析图像路径，我必须使用它才能将图像路径放入

meta

标记中

---

编辑-这个问题是为了记录我的知识，我知道答案，我希望这个问题本身会很好

为了得到工作，你需要几个步骤

获取真实的图像路径 没错，当您在GraphQL中查询图像时，得到的是一个对象而不是图像路径。但要获得图像路径，只需访问对象中的

src

属性：

metaInfo（）{
返回{
标题：this.$page.post.title，
元：[{
属性：“og:image”，
内容：此.page.post.cover_image？.src | |'/logo/logo.png'
}]
}
}

获得正确的图像大小 此卡的图像支持2:1的纵横比，最小尺寸为300x157，最大尺寸为4096x4096像素
（搜索twitter:image）

在互联网上，您可以找到建议的尺寸为1200x630，请参见示例

当然，最好确保使用具有正确尺寸的图像，但即使图像不是脚，也可以通过GraphQL查询具有正确尺寸的图像，并在需要时裁剪图像：

<page-query>
query Post ($id: ID!) {
  post: post (id: $id) {
    ...
    cover_image (width: 1200, height: 630)
  },
}
</page-query>

杂项和测试 当然，您需要定义其他

meta

标记，请注意Twitter标记应带有

name

和

content

，但开放图形标记应带有

property

和

content

：

然后，使用这些工具验证页面，并查看它们的警告：

此外，您还可以使用扩展来测试您的本地网站