Imgur 嵌入不在 Angular 网络应用程序中显示图像

Question

嵌入的 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）时，它可以正常显示。

https://codepen.io/jonasarcangel/pen/OJVOZey

Answer 1

我不确定，为什么它在您这边不起作用，能否请您分享您的代码实例。 Whosebug 团队调试起来会更容易。

我已经在我的 angular 应用程序之一中实现了您共享的 Imgur 图像及其工作。 Please see the stackblitz link.

我在 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>

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

Answer 2

前段时间我遇到了类似的问题，我所做的就是用实际的 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>

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

Answer 3

TL;DR;

由于服务器端呈现，您的 blockquote 嵌入元素被 imgur 的脚本过早处理。当您的组件被呈现时，带有其内容的 iframe 将再次被 blockquote 元素替换。

一旦您的组件呈现在客户端，您需要调用 window.imgurEmbed.createIframe()

发生的事情是

服务器端呈现的页面由您的服务器返回，包含所有 html 元素，包括 blockquote 元素和脚本 link 到 embed.js
html数据被浏览器解析
embed.js run，并添加一个新的 imgur 脚本，embed-controler.js
embed-controller.js 为匹配选择器的所有元素添加 iframe blockquote.imgur-embed-pub
显示 iframe，您会看到图像并替换 blockquote
客户端 angular 应用程序被引导并再次执行所有渲染（请注意，这是正常的 angular 普遍行为）
您的 app-shell-embed 组件已呈现，并用 blockquote 元素替换其内容。

解决方案

渲染带有 imgur 嵌入的组件后，在您的代码中调用 window.imgurEmbed.createIframe() 以强制 imgur 再次进行替换；

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

您可以通过在 chrome 的 url you posted 开发工具控制台中执行 window.imgurEmbed.createIframe() 来验证这一点。

Imgur 嵌入不在 Angular 网络应用程序中显示图像

Imgur embed does not show image in Angular web app

angular

imgur