升级后iOS/iPadOS/macOS Safari动态插入图片加载失败问题求助

• 该问题是Safari 14/15版本的隐私限制特性导致：苹果为了限制非用户主动触发的后台资源加载、减少跨站跟踪风险，对页面初始加载完成后动态插入的资源请求做了严格的上下文校验。
• 若动态图片的创建、src赋值、DOM插入逻辑脱离了用户交互（点击、触摸等）的同步上下文，比如在定时器回调、异步接口回调、动画结束回调中执行，Safari会将该请求标记为非用户主动触发的请求，直接拦截不发起实际网络请求，因此Web Inspector看不到状态码和响应头信息。
• 该规则仅拦截首次从服务器拉取的网络请求，若资源已经在缓存中则不会触发拦截，这也匹配你观察到的「单独访问图片完成缓存后即可正常加载」的现象。

方案1：绑定动态资源加载逻辑到用户交互同步上下文 #

所有动态图片的创建、src赋值操作必须放在用户交互事件的同步逻辑中执行，不要放在脱离交互上下文的异步回调里执行。
示例：

// 正确写法：点击模态框触发按钮的同步逻辑中处理图片加载
modalTrigger.addEventListener('click', function() {
  // 先创建图片、赋值src
  const dynamicImg = document.createElement('img')
  dynamicImg.src = '目标图片地址'
  // 插入到模态框DOM
  modalBody.appendChild(dynamicImg)
  // 最后执行模态框弹出逻辑
  modal.show()
})

// 错误写法：在异步回调中处理图片加载，会被拦截
modalTrigger.addEventListener('click', function() {
  modal.show()
  // 定时器、异步接口回调、动画结束回调都已经脱离用户交互上下文
  setTimeout(() => {
    const dynamicImg = document.createElement('img')
    dynamicImg.src = '目标图片地址'
    modalBody.appendChild(dynamicImg)
  }, 200)
})

方案2：调整图片资源的响应头配置 #

给站点的图片资源响应加上跨域头配置，规避Safari对同域动态资源的异常校验，以Nginx配置为例：

location ~* \.(jpg|jpeg|png|gif|webp|svg)$ {
  add_header Access-Control-Allow-Origin "*";
  add_header Access-Control-Allow-Methods "GET, OPTIONS";
  # 原有图片缓存规则保持不变
}

如果站点配置了内容安全策略（CSP），需要确保img-src指令中包含站点的主域名和所有用到的子域名，避免规则拦截。

方案3：预加载兼容方案 #

如果业务逻辑无法调整执行上下文，可以通过fetch预加载图片blob转成object URL赋值给图片，绕过Safari的拦截规则：

async function getSafariCompatibleImg(imgUrl) {
  const res = await fetch(imgUrl)
  const imgBlob = await res.blob()
  const img = document.createElement('img')
  img.src = URL.createObjectURL(imgBlob)
  return img
}

// 调用示例
getSafariCompatibleImg('目标图片地址').then(img => {
  modalBody.appendChild(img)
})

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