Imgur embed не показывает изображение в веб-приложении Angular - PullRequest
Новая
       45

Imgur embed не показывает изображение в веб-приложении Angular

3 голосов
/ 07 марта 2020

Встроенное изображение Imgur не появляется. Иногда оно появляется на короткое время, а затем исчезает.

Эта страница не содержит изображения. Отображается только пробел.

Глядя на источник, оно следует тому же Имгур код. Он также имеет встраивание. 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

Ответы [ 3 ]

4 голосов
/ 12 марта 2020

TL; DR;

Из-за рендеринга на стороне сервера ваш элемент для вставки blockquote слишком рано обрабатывается сценариями imgur. Затем iframe с его содержимым снова заменяется элементом blockquote при визуализации вашего компонента.

Вам нужно позвонить window.imgurEmbed.createIframe() после того, как ваш компонент будет обработан на стороне клиента

Что произойдет, если

  • страница сервера будет отображена возвращается вашим сервером со всеми элементами html, включая элемент blockquote и ссылку скрипта на данные 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.

Решение

Вызовите window.imgurEmbed.createIframe() в своем коде после того, как компоненты с imgur-встраиваниями будут выполнены, чтобы заставить imgur снова выполнить замену; 

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

Это можно проверить, выполнив window.imgurEmbed.createIframe() в консоли инструментов dev chrome для URL, который вы разместили .

0 голосов
/ 11 марта 2020

Когда-то у меня была похожая проблема go, и я изменил 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: щелкните правой кнопкой мыши на изображении и откройте в новой вкладке.

0 голосов
/ 10 марта 2020

Я не уверен, почему это не работает на вашем конце, не могли бы вы поделиться своим экземпляром кода. Команде StackOverflow было бы легче отлаживать.

Я реализовал образ Imgur, которым вы поделились, в одном из моих приложений angular и оно работает. Пожалуйста, смотрите ссылку на стек стека .

Я добавил код цитаты в app.component. html

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

И я переместил тег script внутри index. html

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

Можете ли вы подтвердить, что ваша реализация такая же, если нет, то можете поделиться своим кодом.

...