时间戳

首页 > 解决方案 > Imgur嵌入不在Angular Web应用程序中显示图像

angular - Imgur嵌入不在Angular Web应用程序中显示图像

问题描述

嵌入的 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

标签： angularimgur

解决方案

TL;博士;

由于服务器端渲染，blockquoteimgur 的脚本过早地处理了您的嵌入元素。然后，当您的组件被渲染时，带有其内容的 iframe 将再次被 blockquote 元素替换。

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

发生的事情是

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

解决方案

一旦嵌入了 imgur 的组件被渲染，就调用window.imgurEmbed.createIframe()你的代码来强制 imgur 再次进行替换；

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

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

推荐阅读