r - Relative image paths for Twitter cards in blogdown

Question

I'm trying to set up a template for generating Twitter Cards in blogdown. It put the following in layouts/partials/twitter-card.html:

<meta name="twitter:site" content="@myname">
<meta name="twitter:creator" content="@myname">
{{ if .IsPage }}
<meta name="twitter:description" content="{{ .Summary }}" />
<meta name="twitter:title" content="{{ .Title }}" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="{{ .Params.image }}" /> {{ else }}
<meta name="twitter:title" content="{{ .Site.Title }}" />
<meta name="twitter:description" content="{{ .Description }}" /> {{ end }}

And the following in layouts/partials/head.html:

{{ partial "twitter-card" . }}

In a given blogpost -- foo.Rmd -- I then put this in the YAML:

image: "static/post/foo/figure-html/some_image.png"

When I let hugo generate a post everything works fine and I get:

<meta name="twitter:image" content="static/post/fixed-points_files/figure-html/some_image.png" /> 

However, when I preview my Twitter card the picture doesn't show up. I presume I would have to set a different path in the YAML front matter, but I can't find any documentation on what the path format should be, and all tutorials use absolute urls in their examples.

Answer 1

Twitter 卡片不支持相对路径，您必须在图像标签中使用完全限定的 HTTP(S) URL。这在故障排除帖子中进行了描述。

Answer 2

在这种情况下，我建议您使用绝对 URL：

image: "/post/foo/figure-html/some_image.png"

请注意，您应该删除目录名称static（为什么？）。