Problem loading Background Images from .json data

I am consuming data from a .json file and using a v-for to iterate through all objects and create a card for each one of them, so far so good.

The weird thing is that for some reason:

1. Whenever I refresh the page the background-size COVER does not apply anymore and

2. some of the background images do not appear as it doesnt seem to be returning the background image URLs for some of the objects and I am absolutely clueless as to why

     <q-card-section
    style="
      background-position: center center;
      background-size: cover;
      height: 65%;
    "
    :style="`background: url(${experiencia.data.img})`"
    ><div class="row">
      <div class="col flex justify-end">
        <q-icon name="fa-solid fa-heart" class="text-h4 text-white" />
      </div>
    </div>
    <div class="row" style="height: 100%">
      <div class="col flex items-end">
        <div
          class="text-h6 text-white q-mb-xl"
          style="text-shadow: 0px 0px 3px black"
        >
          {{ experiencia.data.destino }}
        </div>
      </div>
    </div>
   

BEFORE REFRESH

Here you can see that COVER does not apply anymore as soon as I refresh the page:

AFTER REFRESH

Here is the inspector, for some reason some of the images are not getting the background img url and others are not getting the background size COVER property:

INSPECTOR