Unable to see my images when using Parcel - npm

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