Lazy loading dynamic images with VueJS

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">
    v-for="(image, index) in imageList"
    class="gallery-img lazy"

As for the logic I have these.

mounted() {


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;
    .get(`gallery/${this.currentPage}`, {
      params: params,
    .then((response) => {
      let r =;
      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(;
        this.allowInfinite =;
      this.searchingImage = false;
      this.showPreloader = false;
    .catch((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…

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?

Show the css from class galery-img

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