如何给下一个js图片添加边框半径？

Question

当我将 objectFit="cover" 添加到图像时，我的 Next.js 图像组件出现问题，我的边框半径消失了。有人可以帮忙吗？

Answer 1

在包裹图像的 div 上使用

overflow: hidden

：

<div style={{borderRadius: '5px', overflow: 'hidden'}}>
  <Image src="..." layout="fill" objectFit="cover" />
</div>

Answer 2

您可以向图像添加一个类并更改全局 css 中的 css。 请注意，您无法更改 jsx css 或内联样式中的类属性

Answer 3

import Image from "next/image";

function Img(props) {
  return (
    <>
      <div //👈 wrap your Image tag
        className="flex h-[18px] w-[18px]" //👈 here is Tailwind
        style={{
          position: "relative",
          // width: "18px", //👈 but you can use CSS
          // height: "18px", //👈 and select size here
        }}
      >
        <Image
          src={
            "/someAwesomeImage"
          }
          alt="image"
          fill
          style={{
            objectFit: "cover",
            borderRadius: "100px", //👈 and here you can select border radius
          }}
        />
      </div>
    </>
  );
}

export { Img };

Answer 4

接受的答案对我来说适用于图像本身，但是当我将

placeholder="blur"

与

blurDataURL="..."

一起使用时，占位符的位置有点偏离，并且被切断了。我最终做的是明确定义包装器的大小，它等于图像大小：

<div style={{ borderRadius: '50%', overflow: 'hidden', width: '48px', height: '48px' }}>
  <Image
    src="..."
    objectFit="cover"
    width="48"
    height="48"
    placeholder="blur"
    blurDataURL={data:image/...}
  />
</div>

Answer 5

使用 MUI：

这是一个返回带有样式的图像的组件。 布局应该是“响应式”的，并且图像的宽度和高度属性将在加载后计算。

    import * as React from 'react';
    import Image from 'next/image';
    import { Box } from '@mui/material';
    
    export default function CustomImage(props) {
      const [selectedImage, setSelectedImage] = React.useState();
      const [width, setWidth] = React.useState(0);
      const [height, setHeight] = React.useState(0);
    
      const { src } = props;
    
      React.useEffect(() => {
        src && setSelectedImage(src);
      }, [src]);
    
      return (
        <Box
          sx={{
            position: 'relative',
            width: '100%',
            textAlign: 'center',
            borderRadius: '0.6rem',
            overflow: 'hidden',
          }}
        >
          {selectedImage && (
            <Image
              layout="responsive"
              width={width}
              height={height}
              objectFit="contain"
              src={selectedImage}
              onLoad={({ target }) => {
                const { naturalWidth, naturalHeight } = target;
                setHeight(naturalHeight);
                setWidth(naturalWidth);                
              }}
            />
          )}
        </Box>
      );
    }

Answer 6

您只需添加 className="rounded-full"

例如：

<Image src="..." layout="fixed" className="rounded-full"/>

编辑：我意识到我在写这个答案时正在使用 Tailwind CSS。您可以使用已接受答案中提到的

overflow:hidden

Answer 7

使用 MUI：

你可以使用 CSS 嵌套技巧。

const containerStyle = {
   ...,

   img: {
     border: '2px solid #900 !important' // this is the trick
   }
}

<Box sx={containerStyle}>
   <Image .... />
</Box>