Gatsby-Image-Plugin 在 iOS 台设备上无法正常显示

Question

我遇到一个问题，我的 Gatsby 网站无法在 iOS 设备上正确显示图像。（此问题也可能扩展到 macOS 设备，但这需要进一步测试）。

我正在使用 gatsby-plugin-image 中的 <StaticImage>，并且正在向其中添加样式，如下所示：

import React from 'react';
import { StaticImage } from 'gatsby-plugin-image';

const IndexPage = () => (
  <StaticImage
    src="../images/test_image.jpg"
    alt=""
    style={{ borderRadius: '100%' }}
  />
);

export default IndexPage;

注意：对于 <GatsbyImage> CMS 内容

，此问题也仍然存在

预期结果：图片出现圆角

实际结果：图像显示为方角，但仅在 iOS 台设备上显示。

我创建了一个 test repository 来展示这个问题。

重现：

克隆存储库
安装节点模块
启动开发服务器（npm run start）
从 iOS 设备访问开发服务器

图像似乎位于 iOS 设备上的 gatsby 图像容器之上，而不是像预期的那样位于其内部。我不知道如何解决这个问题，以便样式可以在所有主要浏览器中一致地应用于图像。我什至不确定这是 gatsby-plugin-image 的错误还是苹果在 iOS.

中呈现网页内容的方式存在差异

Answer 1

我想出了一个似乎可以解决问题的解决方案。 <StaticImage> 有一个名为 imgStyle 的属性，可让您将样式直接应用于图像，而不仅仅是包装器组件。

import React from 'react';
import { StaticImage } from 'gatsby-plugin-image';

const IndexPage = () => (
  <StaticImage
    src="../images/test_image.jpg"
    alt=""
    imgStyle={{ borderRadius: '100%' }}
  />
);

export default IndexPage;

Answer 2

感谢post！我有一个类似的问题，我修复它的方法（使用 CSS）是我定义了 gatsby-image-wrapper 元素的 z-index。这样它里面的 img 元素就不会被放置在包装器的顶部（Safari 和 iOS 设备），隐藏弯曲的边框。

在CSS中：

// Use your own className selector if applicable

.gatsby-image-wrapper {
   position: relative;
   z-index: 0; 
}

Gatsby-Image-Plugin 在 iOS 台设备上无法正常显示

Gatsby-Image-Plugin not displaying properly on iOS devices

css

ios

gatsby