json数据渲染卡片时背景图加载异常、background-size:cover失效

两个问题都和v-for遍历逻辑无关，是样式写法和数据处理的问题：

• background-size: cover刷新后失效：你同时在静态style里写了背景尺寸、位置属性，又在动态绑定的:style里用了background简写属性。按照CSS规范，background是简写属性，会自动把所有未显式声明的背景相关子属性（background-size/background-position/background-repeat等）重置为浏览器默认值。开发环境热更新时因为样式注入顺序混乱可能暂时表现正常，整页刷新后样式按规则应用，动态绑定的简写属性直接覆盖了静态写的背景尺寸、位置配置，自然不生效。
• 部分卡片背景图不显示：通常是三类原因导致：
  • 异步加载时序问题：JSON数据是异步拉取的，组件初次v-for渲染时，部分列表项的img字段还没拿到有效值（为空、undefined），直接拼到url()里会生成无效样式
  • 本地路径未被构建工具解析：如果用的是本地静态图片，直接写相对路径没有经过Vite/Webpack处理，打包后资源路径变化会导致部分图片找不到
  • URL格式不合法：图片地址包含中文、空格、特殊字符但没做编码，会导致CSS的url()函数解析失败

1. 动态样式不要用background简写，单独绑定background-image属性，固定的背景尺寸、位置、重复规则全放在静态style里，从根源避免属性被覆盖
2. 给动态图片地址做空值判断，只有img字段有有效值时才注入背景样式，避免生成无效CSS
3. 本地静态资源统一用import或new URL(..., import.meta.url)的方式引入，让构建工具正确处理资源路径

修复后的代码如下：

<q-card-section
  style="
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 65%;
  "
  :style="experiencia.data?.img ? { backgroundImage: `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>
</q-card-section>

如果改完仍有部分图片加载失败：

• 先在v-for循环里打印所有项的experiencia.data.img值，确认是否存在字段拼写错误、空值、路径写错的情况
• 临时把图片地址换成可访问的网络图片测试，如果网络图片能正常加载，说明是本地资源引入方式错误，调整为构建工具支持的引入写法即可
• 检查图片资源是否存在跨域限制，跨域资源会被浏览器拦截导致加载失败

内容的提问来源于stack exchange，提问作者Dirk Gaston