图片加载失败导致无法滑动切换

Amecy commented 3 years ago

环境： Android / iOS / PC

如果图片加载失败，没有创建 img 节点，导致无法滑动切换

尝试修复：设置 brokenElement ，图片加载失败会提供默认图，仍不能滑动切换。

Amecy commented 3 years ago

找到原因了，是我们为了临时修复 “ iOS 设备图片预览时可能不显示图片” 的问题导致的。相关issue： #24 、 #33

/* fix: ① 修复 react-photo-view 在 iOS 上面图片可能不显示的问题 */
.PhotoView__PhotoBox {
  width: 100% !important;
  height: 100% !important;
  /*
    react-photo-view 可以响应 image 和 mask 的滑动切换（brokenElement不响应）
    为了修复问题 ① 而设置了宽高 100% ，导致完全遮住了 mask ， 导致无法在 mask 上滑动切换，
    最终导致图片加载失败后显示的默认图(brokenElement) 无法滑动切换。

    所以这里将 photo-box 设为不响应鼠标，这样才可以恢复滑动 mask 进行切换
  */
  pointer-events: none;
}

Amecy commented 3 years ago

设置 pointer-events: none; 将导致图片无法缩放。其实给 height 一个值能撑起高度就可以了。

/* fix: ① 修复 react-photo-view 在 iOS 上面图片可能不显示的问题 */
.PhotoView__PhotoBox {
  width: 100% !important;
  height: 50px !important;
}

MinJieLiu / react-photo-view

图片加载失败导致无法滑动切换 #55