图像上的边框半径在手机上不起作用 - safari

Question

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

在我的 gatsby 项目中，我希望图像上有一个实心边框和边框半径。 在 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

gatsby-image 包现已弃用

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

前任：

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

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