如何移除Next.js中next/image组件外层包裹的span标签及内置内联样式

解决方案 #

方案1：关闭图片优化，直接输出原生img标签（完全符合你期望的渲染结果） #

Next.js 13及以上版本的next/image组件支持unoptimized属性，添加该属性后会关闭所有图片优化逻辑，不会生成外层span包裹元素，也不会注入额外内联样式，渲染结果和原生img完全一致。
代码示例：

import Image from 'next/image';
<Image 
  className={'imgBack'} 
  src={myImg} 
  width="160" 
  height="160" 
  alt="" 
  unoptimized
/>

方案2：保留图片优化能力，样式覆盖解决冲突 #

如果你需要使用Next.js的图片压缩、格式转换、响应式适配等优化能力，可以通过提升CSS优先级的方式覆盖自动生成的内联样式，外层的span元素不会影响实际布局，可以直接忽略：

/* 自定义样式添加!important提升优先级，覆盖内联样式 */
.imgBack {
  position: static !important;
  inset: auto !important;
  min-width: 160px !important;
  min-height: 160px !important;
}

方案3：低版本Next.js兼容处理 #

如果你使用的是Next.js 12及更低版本，原生next/image组件无法关闭外层包裹逻辑，可以直接使用原生<img>标签，或者升级到Next.js 13+版本后使用方案1的处理方式。

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