blueimp/JavaScript-Load-Image

Images not being inserted properly

ebridges opened this issue · 2 comments

ebridges commented

Thanks for a really useful product!

I am trying to insert a series of images into specific elements document, after having been processed by JSLI. Each image should be inserted into a different element, as shown in the first example.

Maybe I'm doing something wrong, however it seems that JSLI is appending to the same element.

P.s. sorry for direct linking to your version of the lib -- wanted to have a standalone example. My code does not do that.

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
  </head>
  <body>
    Works as expected:
    <dl>
      <dt>Image A</dt>
      <dd><div class='image'></div></dd>
      <dt>Image B</dt>
      <dd><div class='image'></div></dd>
    </dl>
    <hr>
    Does not work as expected:
    <dl>
      <dt>Image A</dt>
      <dd><div class='blueimp'></div></dd>
      <dt>Image B</dt>
      <dd><div class='blueimp'></div></dd>
    </dl>
  </body>
  <script>
    for (loc of document.getElementsByClassName('image')) {
      var img = document.createElement('img'); 
      img.src = 'https://picsum.photos/300/200.jpg'
      loc.appendChild(img);
    }

    for (loc of document.getElementsByClassName('blueimp')) {
      loadImage(
        'https://picsum.photos/300/200.jpg',
        function(img) {
          img.style.width = '300';
          img.style.height = 'auto';
          img.style.maxWidth = '100vw';
          loc.appendChild(img);
        },
        {
          orientation: true
        }
      );
    }
  </script>
</html>
ebridges commented

Issue was scoping -- changing to for (let loc of document.getElementsByClassName('blueimp')) { fixed it.

blueimp commented

Thanks for posting your follow-up! ☺️