Astro.js+Preact项目移动端卡片图片偶发加载失败求助

应用内的项目卡片在移动端环境下，部分项目图片偶尔出现加载失败的情况，必须刷新浏览器才能正常显示，桌面端浏览则完全正常。

使用Astro.js搭配Preact开发。

https://streamable.com/okquzk

在Astro框架中，通过mdx或md数据创建集合时，传入图片路径无需添加public/前缀，直接写/projects/bhn.webp即可：

---
title: "Black Hat News"
heroImage: /projects/bhn.webp 
---

之后在Card.tsx组件中使用该图片：

import "./styles/card.css";

type Props = {
  title: string;
  heroImage: string;
  slug: string;
};

export const Card = ({ title, heroImage, slug }: Props) => (
  <a href={slug}>
    <div class="card">
      <img src={heroImage} alt={title} />
      <div class="info">
        <h1>{title}</h1>
      </div>
    </div>
  </a>
);

对应的CSS样式：

/* Set padding top to make a trick with aspect ratio 16:9 */
.card {
  padding: 1rem;
  width: 100%;
  padding-top: 56.25%;

  position: relative;
  display: flex;
  align-items: flex-end;
  transition: 0.4s ease-out;
  box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.card:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;

  /* background: rgba(0, 0, 0, 0.6); */
  z-index: 2;
}

.card img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  object-position: center top;
  position: absolute;
  top: 0;
  left: 0;
}
.card .info {
  position: relative;
  z-index: 3;
  color: var(--color-text);
  background: var(--color-dark);
  padding: 0.4rem;
  border-radius: 5px;
}
.card .info h1 {
  font-size: var(--font-lg);
}

/* for desktop add nice effects */

@media (min-width: 1024px) {
  .card:hover {
    transform: translateY(10px);
  }
  .card:hover:before {
    opacity: 1;
    background: rgba(0, 0, 0, 0.6);
  }
  .card:hover .info {
    opacity: 1;
    transform: translateY(0px);
  }
  .card:before {
    transition: 0.3s;
    opacity: 0;
  }

  .card .info {
    opacity: 0;
    transform: translateY(30px);
    transition: 0.3s;
  }
  .card .info h1 {
    margin: 0px;
  }
}

新增组件使用代码：

import "./styles/projectsGrid.css";
import { useStore } from "@nanostores/preact";
import { getProjectsByTag } from "@utils/*";
import type { CollectionEntry } from "astro:content";
import { tagValue } from "src/tagStore";
import { Card } from "./Card";

type Props = {
  projects: CollectionEntry<"projects">[];
};

export const ProjectsGrid = ({ projects }: Props) => {
  const $tagValue = useStore(tagValue);

  const filteredProjects = getProjectsByTag(projects, $tagValue);

  return (
    <div class="projects_wrapper">
      {filteredProjects.map(({ data: { title, heroImage }, slug }) => (
        <Card title={title} heroImage={heroImage} slug={slug} />
      ))}
    </div>
  );
};

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