Border -radius在图像上不起作用 - 野生动物园

Question

我已经看到已经存在类似的帖子...在那里发布的解决方案对我没有工作。抱歉再次问。

在我的盖茨比项目中，我希望在图像上使用坚固的边框和边界拉迪乌斯。在Chrome上，它看起来如预期，但是在移动设备和Safari上，图像并没有使圆角并溢出边界。我该如何解决？

.imgContainer {
  border: solid 1px #0784b5;
  border-radius: 10px;
  overflow: hidden;
}

.img {
  position: relative;
  border-radius: 10px;
  top: 0;
  left: 0;
}

<div className={styles.imgContainer}>
  <GatsbyImage className={styles.img} 
  image={data.file.childImageSharp.gatsbyImageData} 
  alt="portrait" 
  />
</div>

提前感谢！

Answer 1

现在已弃用了盖茨比图像软件包，

您可以使用： https .com/plugins/gatsby-plugin-image/

ex：

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

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