Unable to see my images when using Parcel

Question

I am trying to lazy load images using Javascript and when I run a server using parcel I can only see the images when the tag is assigned a src. But when I assign a data-src to the tag to implement the lazy loading, the images on the parcel server never show up. My JavaScript code is correct, I think there is a problem with parcel, anyone know how to fix this?

Here is my html and JS code:

<div class="photo__container photo__container--one">
        <img
          data-src="portrait/1-vertical.jpeg"
          alt="image"
          class="fade-in-img img-vertical-lazy"
        />
        <img
          data-src="portrait/2-vertical.jpeg"
          alt="image"
          class="fade-in-img img-vertical-lazy"
        />
        <img
          data-src="portrait/3-vertical.jpeg"
          alt="image"
          class="fade-in-img img-vertical-lazy"
        />
      </div>
JS code:
//lazy-loading

const lazyImages = document.querySelectorAll('.img-vertical-lazy');

const appearLazy = {
  threshold: 0.1
};
const lazyLoading = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
      if (!entry.isIntersecting) return;
          entry.target.src = entry.target.getAttribute('data-src');
          lazyLoading.unobserve(entry.target);
  });
}, appearLazy);

JS code:
lazyImages.forEach(image => lazyLoading.observe(image));