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 >
      <div >
        <q-icon name="fa-solid fa-heart"  />
      </div>
    </div>
    <div  style="height: 100%">
      <div >
        <div
          
          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

CodePudding user response：

The background CSS property is a shorthand for a dozen background related CSS properties - https://developer.mozilla.org/en-US/docs/Web/CSS/background When you set it to the URL - you are resetting the other values to their defaults. You should use background-image if you want to set just the image URL.