Imgur embed does not show image in Angular web app

user_195965 0
Viewed 1451

Embedded Imgur image does not appear. Sometimes, it appears briefly, then disappears.

This page does not contain the image. It only shows a blank.

Looking at the source, it follows the same Imgur code. It also has embed.js at the bottom of the page.

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

It displays properly when I paste the same HTML on another site, like CodePen.

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

imgur angular
3 Answers

TL;DR;

Because of server side rendering, your blockquote embed element is processed too early by imgur's scripts. The iframe with its content is then replaced by a blockquote element again when your component is rendered.

You need to call window.imgurEmbed.createIframe() once your component is rendered client side

What happens is

  • the server side rendered page is returned by your server, with all html elements, including the blockquote element and a script link to embed.js
  • html data is parsed by the browser
  • embed.js run, and adds a new imgur's script, embed-controler.js
  • that embed-controller.js adds an iframe for all elements matching the selector blockquote.imgur-embed-pub
  • the iframe is displayed and you see the image and replaces the blockquote
  • the client angular app is bootstrapped and performs all the rendering again (Note that this is normal angular universal behaviour)
  • Your app-shell-embed component is rendered, and replaces its content with the blockquote element.

Solution

Call window.imgurEmbed.createIframe() in your code once the components with imgur embeds have been rendered to force imgur to do the replacement again;

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

You can verify this by executing window.imgurEmbed.createIframe() in chrome's dev tools console for the url you posted.

user_11607940

I am not sure, why it's not working at your end, can you please share your code instance. It would be easier for the StackOverflow team to debug.

I have implemented the Imgur image shared by you in one of my angular app and its working. Please see the stackblitz link.

I have added the blockquote code inside app.component.html

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

And I have moved the script tag inside the index.html

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

Can you please confirm if your implementation is the same, if not can you please share your code.

user_105786380

I had a similar issue some time ago and what I did was changing the href by the actual one.

From this one:

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

To this one:

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

In order to obtain the actual URL: right-click on the image and open in new tab.

user_48124750
Related