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

Question

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

我正在使用<StaticImage>fromgatsby-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;

<GatsbyImage>注意： CMS 内容也存在此问题

预期结果：图像出现圆角

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

我创建了一个测试存储库来展示该问题。

重现：

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;