如何将异步图像渲染到我的推特卡中（推特：图像）

Posted 2023-03-28

【中文标题】如何将异步图像渲染到我的推特卡中（推特：图像）

【英文标题】：How can i render an async image into my twitter card (twitter:image)

【发布时间】：2021-12-02 16:50:34

【问题描述】：

大家好，我刚刚有一个问题，我在互联网上没有找到。

所以基本上我正在制作一张推特卡，但这里的问题是图像生成器是异步的。它通过给出数字或字符串来生成图像。

所以代码会是这样的：

<meta
  name="twitter:image"
  content=`https://image-generator/$some_string_or_number_in_here.png`
 />

但是当我尝试将其设置为 twitter 卡时，它不起作用。不显示或显示默认图像。

我知道 twitter 卡需要一个已经存在的直接链接，但这个是一个节点应用程序，它会为你生成 png。

有什么建议可以解决这个问题吗？

【问题讨论】：

你能不能做一些事情，比如让 a =https://image-generator/$some_string_or_number_in_here.png 然后 content = a。在大多数情况下它对我有帮助

哦，所以只是把它放在元标记内的一个变量？它对你有用吗？

你可以试试，在元标记中没有完全尝试过，但是在 html 和 javascript 中可以，它可以工作。

【参考方案1】：

请试试这个

 let _desc = `https://image-generator/$some_string_or_number_in_here.png`;
document.querySelector('meta[name="twitter:image"]').setAttribute("content", _desc);

【讨论】：

您也可以查看此链接以根据您的需要使用 document.querySelector。 ***.com/questions/59198952/…

你在 react (next js) 中试过这个吗？顺便说一句，如果我执行此操作，推特卡图像会起作用吗？

抱歉，不懂那种语言。元标记仅用于共享有关您的页面的信息，并用于搜索引擎优化。如果要显示图像，只需使用 img 标签