为什么instagram嵌入代码只显示instagram图标,而不是图像？

Question

我想将我的Instagram帐户中的照片嵌入到我的博客中.我认为从照片中复制嵌入代码,将其粘贴到我的编辑器中然后关闭就是一个简单的例子.但事实并非如此.从截图中可以看出,我得到了照片信息,但没有照片.

如果我只是将一个图像标签放入html中,那么图像会完美地运行,而不是采用instagram照片的风格.

即

<img src="https://www.instagram.com/p/BFbPlbwIceD" />

有没有人有任何想法为什么嵌入代码不起作用.我也在一个简单的html文件中尝试了嵌入代码,它也不起作用,所以它不是我的CMS导致问题,这是Umbraco.

Answer 1

(以下答案适用于没有服务器的本地html文件)

我遇到了同样的问题,并注意到嵌入代码中的这一行:

<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>

当我将方案("http")添加到源如下时,图像显示正确.

<script async defer src="http://platform.instagram.com/en_US/embeds.js"></script>

希望这可以帮助.

这对我有用，但我必须将其更改为仅使用 https 而不是 http `https://platform.instagram.com/en_US/embeds.js` (2认同)

Answer 2

问题的原因是

<script async src="//www.instagram.com/embed.js"></script>

在之前运行

<blockquote>...</blockquote>

存在于 DOM 中。这意味着脚本在加载时找不到任何块引用以转换为 iframe。

由于脚本被标记为异步，因此您可能会遇到竞争条件，每次刷新时您都会获得不同的加载顺序。

您需要确保在 blockquote 出现后加载脚本。移动文档末尾的脚本部分。或者如果稍后使用 JS 添加到 DOM，您也可以运行

instgrm.Embeds.process()

在你确定是在 DOM 之后。

Answer 3

我遇到过同样的问题。在反应中，您必须像这样处理嵌入：

componentDidMount() {
  window.instgrm.Embeds.process();
}

这对我有用！

Answer 4

我很晚才开始讨论这个问题，但目前这个问题似乎仍然在许多网站上发生。

在我自己的网站上进行一些研究后，我注意到控制台加载时出现错误。按照错误中的链接，我到达以下位置

显然该页面不会加载 js，因为它不是正确的 Web 链接。

要解决这个问题，请替换嵌入底部的这一行

<script async src="//www.instagram.com/embed.js"></script>

有了这个

<script async src="https://instagram.com/static/bundles/es6/EmbedSDK.js/47c7ec92d91e.js"></script>

目前可以使用，但如果他们再次更改 js url，则可能会破坏链接。

现在应该出现了。

Answer 5

该问题已报告。

似乎是一个不容易修复的已知问题： http ://issues.umbraco.org/issue/U4-8646