如何去除Next.js中Image组件的白色边框？移动端专属问题

针对你遇到的移动端浏览器中Next.js Image组件出现白色边框的问题，以下是几个可行的解决建议：

• 给底层img元素移除轮廓与边框
  Next.js的Image组件默认会在外层生成容器，直接给Image加style可能无法作用到底层的<img>标签。可以使用imgClassName属性为底层img添加样式：

  <Image
    src={props.src}
    alt="image"
    fill
    sizes="100%"
    style={{
      objectFit: "cover",
      borderRadius: 100,
    }}
    imgClassName="border-0 outline-none" // 新增这行
  />
  

• 确保父容器完全裁剪内容
  移动端浏览器渲染圆角时可能出现细微白边，给父容器添加overflow: hidden可确保图片完全覆盖容器，避免背景色透出：

  <div
    className="relative flex cursor-pointer rounded-full bg-slate-200 dark:bg-slate-800 overflow-hidden" // 新增overflow-hidden
    style={{
      width: props.size, 
      height: props.size,
    }}
  >
  

• 全局重置图片默认样式
  在全局CSS文件中添加针对img的重置规则，覆盖移动端浏览器的默认样式：

  img {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }
  

• 检查图片源文件
  极少数情况是图片本身带有白色边框，可直接打开图片链接确认，若存在则需先处理图片文件。

内容的提问来源于stack exchange，提问作者sllmn