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

Question

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

我正在使用来自 <StaticImage> 的 gatsby-plugin-image 并且我正在为它添加样式：

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;

注意：此问题对于 CMS 内容的 <GatsbyImage> 也仍然存在

预期结果：图片出现圆角

实际结果：图像显示为方角，但仅限于 iOS 设备。

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

重现：

1. 克隆仓库
2. 安装节点模块
3. 启动开发服务器 (npm run start)
4. 从 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

感谢您的帖子！我有一个类似的问题，我修复它的方式（使用 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; 
}