Lazy loading dynamic images with VueJS

Questions
1

I’m trying to lazy load some images with infinite scrolling too. Infinite scrolling works just fine but the lazy loading wont.

<f7-block style="margin-top: 0">
  <img
    @click="openDetail(image)"
    v-for="(image, index) in imageList"
    :key="index"
    class="gallery-img lazy"
    :data-src="image.img_url"
    alt=""
  />
</f7-block>

As for the logic I have these.

mounted() {
this.$f7.lazy.create(".page");
this.getImages();

}

And here I trigger the lazy loading when I get new dynamic images

getImages() {
  if (!this.allowInfinite) return;
  this.allowInfinite = false;
  this.searchingImage = true;
  let params = {};
  if (this.currentCat) params.category = this.currentCat;
  if (this.currentLoc) params.location = this.currentLoc;
  if (this.currentKey) params.keyword = this.currentKey;
  this.$axios
    .get(`gallery/${this.currentPage}`, {
      params: params,
    })
    .then((response) => {
      let r = response.data;
      let next_link = null;
      if (r.next_link) next_link = r.next_link;
      if (r.error) {
        this.$store.commit("toggle_alert", {
          color: "error",
          text: r.msg,
          delta_appear: r.delta_appear,
          next_link: next_link,
        });
      } else {
        this.imageList = this.imageList.concat(response.data.sh_images);
        $$("img.lazy").trigger("lazy");
        this.allowInfinite = response.data.has_next;
        this.currentPage++;
      }
      this.searchingImage = false;
      this.showPreloader = false;
    })
    .catch((error) => {
      console.log(error);
      this.searchingImage = false;
      this.showPreloader = false;
    });
}

Am I missing something? The images just won’t load, there’s a white screen going on as if there were no images, if I inspect the elements I can see the image elements loaded and with the correct data-src url, but nothing is showing…

2

I’m still having this issue, I left it as a last priority and now that everything else is finished I’m stuck with the same problem.
What am I doing wrong here?

4

Show the css from class galery-img

5

You can create your own lazy load class. Its just css The Complete Guide to Lazy Loading Images | CSS-Tricks - CSS-Tricks