twitter:image Vue.js 应用程序不可见

Question

我在使用 Vue.js 应用程序的 Twitter 卡片时遇到问题。当我运行url通过Twitter card validator时，所有的检查都通过了，但是没有显示图像。

我查看了 Twitter 上的疑难解答指南并对图像应用了以下更改，但仍然无法解决问题。 https://twittercommunity.com/t/card-error-unable-to-render-or-no-image-read-this-first/62736

这就是我在项目的 index.html 文件中定义图像的方式。图像保存在 public 文件夹中。

<meta name="twitter:image" content="https://speakher.jp/banner_twitter.png">

关于可能导致问题的原因，您有任何指示吗？

Answer 1

现在检查 Twitter Card Validator 会显示正确的图像。有时您看到的卡片是缓存的，因此如果您想查看图像的最新版本，只需添加一个具有随机名称和（可选）随机值的参数。

例如link https://speakher.jp，只需添加一个小的随机参数就会强制推特加载最新版本的图片。这应该加载相同的页面，因为参数没有任何意义（通常）。

https://speakher.jp?000000000001

您也可以在将实际 link 发布到 Twitter 时使用相同的方法。这将确保 Twitter 始终使用最新的卡片预览。

我从验证者那里得到了这张卡片。这似乎与您提供的 link 中的图像匹配。

twitter:image not visible for Vue.js application