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

Question

我一直在为我妈妈想创办的公司设计一个网站。我终于设置并部署了所有内容。一切都按照她的意愿进行，但是当我们尝试访问我妈妈或兄弟 iPhone 的网站时，图像加载 none。 css 媒体查询正确格式化以便在 iPhone 上查看它工作正常，我在 chrome 和 tor 上在我的 OnePlus 8 Pro 上尝试过它并正确加载图像。

该站点是在 React 中创建的，部署在 google firebase 上（不确定这是否会以某种方式出现问题，但我查了一下并没有遇到任何问题。我将不胜感激任何帮助在下面发布了屏幕截图和代码片段：

在桌面上应该是这样的：

这是 iPhone 上发生的事情：

html & css 对于 header 部分：

    <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

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

My site doesn't load images on iPhones but does on all other browsers, mobile or desktop

html

css

iphone

safari

reactjs