The image cannot be displayed error

[kapooramit]

I have the following code and the image popup throws the error: 'the image could not be loaded". Also, the href attribute of the popup is 'undefined'. What am I doing wrong?

$('span.confluence-embedded-file-wrapper').magnificPopup({type: 'image'});

Popup snippet of the error:

<div class="mfp-preloader"><a href="undefined">The image</a> could not be loaded.</div>

And the HTML code:

<span class="confluence-embedded-file-wrapper conf-macro output-inline" data-hasbody="false" data-macro-name="sp-image">
<img class="confluence-embedded-image" src="/space2021/files/582418577/582418579/1/1563720219000/image1.png">
</span>

[kapooramit]

It came out to doing three things.

1. Missing href. For this I added the below:

   <script>
   count = document.getElementsByTagName('img').length;
   href ='';
   n = 0;
   while (n < (count + 1)) {
   imgsrc = document.getElementsByTagName('img')[n].getAttribute('src');
   document.getElementsByTagName('img')[n].setAttribute('href', imgsrc); 
   n = n + 1;
   imgsrc ='';
   }
   </script>

2. Instead of before or after the magnific call, I had to add it at the end of page after the body tag. It works now.

3. Delegation :

Modified the call to

$('span.confluence-embedded-file-wrapper').magnificPopup({delegate: 'img' , type: 'image'});

Is there a way to make it work work without inserting the href attribute? src attribute is already there which is what I am pushing to href.

[kapooramit]

All seems working now.