我的网站不会在 iPhone 上加载图像，但会在所有其他浏览器、移动设备或桌面设备上加载

Question

我一直在为我妈妈想要开始的生意设计一个网站。我终于完成了所有设置和部署。一切都按她的意愿工作，但是当我们尝试使用我妈妈或兄弟的 iPhone 访问该网站时，没有任何图像加载。 css 媒体查询格式正确，以便在 iPhone 上查看它工作正常，我在 Chrome 和 Tor 上的 OnePlus 8 Pro 上进行了尝试，它正确加载了图像。

该网站是用 React 制作的，部署在 google firebase 上（不确定这是否会以某种方式出现问题，但我查了一下并没有遇到任何问题。任何帮助将不胜感激我已经发布了屏幕截图和代码 sn -ps 下面：

这是它在桌面上的样子：

以下是 iPhone 上发生的情况：

标题部分的html和css：

    <div className="header">
  <div className="header__image">
    <div className="background__mask">
      <img className="logo_img" src={ColoredLogo} alt="logo" />

      <h1 className="header__text lineTwo">
        Focus on what you do best!
        <br /> Leave the books to us!
      </h1>
    </div>{" "}
  </div>
</div>


.header__image {
  width: 100%;
  height: 775px;
  background-image: url("./bkg_img.webp");
  background-size: cover;
  background-attachment: fixed;
}

.header__text {
  font-size: 60px;
  color: rgb(224, 149, 8);
  text-align: center;
  text-shadow: 0.25px 0.25px #000000;
}

.myh1 {
  color: rgb(1, 51, 38);
  margin-top: 30rem;
}

.lineTwo {
  margin-top: 37rem;
}

.logo_img {
  position: absolute;
  width: 100vw;
  height: 50vh;
}

.background__mask {
  display: flex;
  flex-direction: column;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  overflow: hidden;
  align-items: center;
}

@media (max-width: 764px) {
  .lineTwo {
    margin-top: 25rem;
  }
  .logo_img {
    margin-top: -7rem;
  }
}

虚拟簿记部分的html和css：

 <div className="entrepreneurs">
  <h1 className="entrepreneurs__heading">
    Virtual Bookkeeping for Entrepreneurs
  </h1>
  <div className="body__container">
    <div className="entrepreneurs__left">
      {/* <h1>Bookkeeping for small to medium sized businesses:</h1>
    <h2>Did you know outsourcing your bookkeeping can: </h2> */}
      <img src={logo} alt="" />
    </div>
    <div className="entrepreneurs__right">
      <ul>
        <li>✓ Save Your Business Money</li>
        <li>✓ Increase Your Cash Flow</li>
        <li>✓ Reduce Overhead Costs</li>
        <li>✓ Save Money on Your Taxes</li>
        <li>✓ Better Analysis of Your Business</li>
        <li>✓ Help You Get Investors</li>
      </ul>
    </div>
  </div>
</div>


.entrepreneurs__right > ul {
  list-style-type: none;
  font-size: 24px;
}

.entrepreneurs__left > img {
  width: 80%;
  height: auto;
  border-radius: 2.5%;
}
.entrepreneurs {
  text-align: center;
}
.entrepreneurs > h1 {
  font-size: 55px;
}

.body__container {
  color: teal;
  padding: 20px;
  background-color: white;
  display: flex;
  background-size: cover;
  background-attachment: fixed;
}

.entrepreneurs__right {
  color: rgb(70, 70, 70);
}

.entrepreneurs__right > ul > li {
  margin-top: 25px;
}

.entrepreneurs__right > ul > li {
  line-height: 4rem;
}

.entrepreneurs__heading {
  font-size: 60px;
  color: rgb(1, 51, 38);
  text-align: center;
  text-shadow: 0.25px 0.25px #000000;
}

@media (max-width: 1156px) {
  .body__container {
    flex-direction: column;
  }
  .entrepreneurs__right {
    margin-left: auto;
    margin-right: auto;
  }
}

Answer 1

您正在为您的图像使用webp 格式。 Safari 仅在最新更新（版本 14）后才支持此格式。 如果您的 Safari 版本早于版本 14，则您的图像将无法正常工作，除非实现回退到受支持的图像格式。

https://caniuse.com/?search=webp