Imgur嵌入在Angular web app中不显示图像

嵌入的Imgur图像未显示。有时，它短暂地出现，然后消失

本页仅显示空白

从源代码看，它遵循相同的Imgur代码。页面底部还有embed.js

<blockquote class="imgur-embed-pub" lang="en" data-id="a/lKOEEdd" data-context="false"><br>
    <a href="https://imgur.com/a/lKOEEdd">View on Imgur</a>
</blockquote>

当我将相同的HTML粘贴到另一个站点（如CodePen）时，它会正确显示

---

我不确定，为什么它在您这边不起作用，您能分享一下您的代码实例吗。StackOverflow团队更容易调试

我已经在我的angular应用程序中实现了您共享的Imgur图像及其工作模式

我在app.component.html中添加了blockquote代码

<blockquote class="imgur-embed-pub" lang="en" data-id="a/lKOEEdd">
  <a href="//imgur.com/a/lKOEEdd">Papa BearBakehouse</a>
</blockquote>

我已经将脚本标记移动到index.html中

<script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>

---

请确认您的实现是否相同，如果不相同，请共享您的代码。

我不久前也遇到过类似的问题，我所做的是按实际的href更改href

从这一点：

<blockquote class="imgur-embed-pub" lang="en" data-id="a/lKOEEdd" data-context="false">
    <a href="https://imgur.com/a/lKOEEdd">View on Imgur</a>
</blockquote>

<blockquote class="imgur-embed-pub" lang="en" data-id="a/lKOEEdd" data-context="false">
    <a href="https://i.imgur.com/a/lKOEEdd.jpg">View on Imgur</a>
</blockquote>

对于这一点：

<blockquote class="imgur-embed-pub" lang="en" data-id="a/lKOEEdd" data-context="false">
    <a href="https://imgur.com/a/lKOEEdd">View on Imgur</a>
</blockquote>

<blockquote class="imgur-embed-pub" lang="en" data-id="a/lKOEEdd" data-context="false">
    <a href="https://i.imgur.com/a/lKOEEdd.jpg">View on Imgur</a>
</blockquote>

---

要获得实际的URL：右键单击图像并在新选项卡中打开。

TL；博士

由于服务器端呈现，imgur的脚本过早地处理了

blockquote

embed元素。当呈现组件时，iframe及其内容将再次替换为blockquote元素

在客户端呈现组件后，需要调用

window.imgurEmbed.createIframe（）

发生的事情是

• 服务器端呈现的页面由服务器返回，其中包含所有html元素，包括blockquote元素和指向

  embed.js

• html数据由浏览器解析

• embed.js运行

  ，并添加一个新的imgur脚本，

  embed controller.js

• 该

  embed controller.js

  为匹配选择器

  blockquote.imgur embed pub

• 此时将显示iframe，您将看到该图像并替换

  blockquote

• 客户端angular应用程序已引导并再次执行所有渲染（请注意，这是正常的angular通用行为）
• 您的

  appshell嵌入

  组件将被呈现，并用

  blockquote

  元素替换其内容

解决方案

呈现带有imgur嵌入的组件后，在代码中调用

window.imgurEmbed.createIframe（）

，以强制imgur再次进行替换

if(isPlatformBrowser(this.platformId))//Call the update client side only
{
    window.imgurEmbed.createIframe();
}

---

您可以通过在chrome的开发工具控制台中执行

window.imgurEmbed.createIframe（）

来验证这一点。

随机行为需要更多信息，如inspector面板中网络选项卡的屏幕截图，可能他们不喜欢页面的原点？您可以发布处理页面的角度代码吗？我怀疑它与embed.js的关系不太好。你能为你的问题创建一个stackblitz实例吗？你能提供组件吗code@num8er是否有一个政策，他们限制原产地或我必须申请被接受为原产地？是的，任何其他网站，它的工作。我的link codepen链接也显示了它的工作原理。你有没有办法复制这个问题，这样我们就可以看到你的代码并进行调试。是的，它工作了！这解释了为什么它会出现一段时间，然后消失（在完成渲染时）。非常感谢。