我的网站未在iPhone上加载图片，但在所有其他浏览器（移动版或台式机）上加载了图片

我一直在为她妈妈想开的公司设计一个网站。我终于完成了所有的设置和部署。一切都按照她的要求进行，但是当我们尝试通过我的妈妈或兄弟的iPhone进入该网站时，没有任何图像加载。css媒体查询可以正确格式化它，以便在iPhone上查看它正常工作，我在OnePlus 8 Pro的chrome和tor上尝试了它，并正确加载了图像。

该网站是由React制作的，已部署在Google Firebase上（不知道这是否会出现问题，但我查了一下却没有发现任何问题。我在下面发布了屏幕截图和代码段，对您的帮助非常感谢：

这是台式机上的外观：

这是在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;
  }
}