NextJS中<img>与<Image>组件布局属性差异及问题咨询

问题现象 #

开发自定义复选框时遇到两个异常表现：

• 仅将.init和.hover类分配给原生<img>标签时，才能实现堆叠定位效果
• 仅将.done类分配给NextJS的<Image>组件时，该类的样式才能正常显示

相关代码 #

JSX代码

<div className={styles.container}>
  <input className={styles.ckb} type="checkbox" name="vt" id="ckb"/>
  <label htmlFor="ckb">
    <img src="VT/vt-.svg" height={88} width={88} className={styles.init}/>
    <img src="VT/vt.svg" height={88} width={88} className={styles.hover} />
    <Image src="VT/vtD.svg" height={88} width={88} className={styles.done} />
   <span className={styles.lab}>: VEGE :</span>
  </label>
</div>

CSS代码

.container {
    display: block;
    position: relative;
}

.init {
    position: absolute;
    top: 0; left: 0;
}
.hover {
    opacity: 0;
    position: absolute;
    top: 0; left: 0;
}

.done {
    opacity: 0;
    position: absolute;
    top: 0; left: 0;
}

input[type='checkbox'].ckb {
    opacity: 1;
    cursor: pointer;
    position: absolute;
}

input[type='checkbox'].ckb:hover + label .hover {
    opacity: 1;
    display: inline;
}

input[type='checkbox'].ckb:checked + label .done {
    opacity: 1;
    display: inline;
}

原因分析 #

1. NextJS <Image>的DOM结构包装特性
   NextJS的<Image>组件并非直接渲染为原生<img>标签，它会自动生成包含<div>、<picture>等元素的嵌套DOM结构。你给<Image>添加的.done类实际是挂载在最外层的容器元素上，而非最终的<img>节点。而原生<img>是直接将样式应用到自身，所以堆叠定位的样式能直接生效；NextJS Image的容器虽然继承了position: absolute，但内部<img>的布局还受组件默认样式影响，导致只有.done类的表现看似正常，本质和原生img的样式作用层级不同。

2. CSS选择器的匹配逻辑差异
   你的CSS中，input[type='checkbox'].ckb:hover + label .hover 选择的是label下直接带有.hover类的子元素（也就是原生<img>），但如果是NextJS Image，.done类在容器上，内部<img>并没有该类，不过因为.done的样式是作用在容器上，容器的绝对定位会带动内部img位置，所以看起来样式生效了，但这是间接作用的结果，和原生img的直接样式应用逻辑不同。

3. NextJS Image的默认样式干扰
   NextJS <Image>组件默认会给内部元素添加诸如display: block、width: 100%等布局样式，这些默认样式可能和你自定义的position: absolute规则产生冲突，导致堆叠定位失效；而原生<img>没有这些默认样式，能完全遵循你定义的CSS规则实现堆叠。

解决建议 #

• 使用CSS后代选择器穿透NextJS Image的容器，比如将.done的样式改为.done img，直接定位到内部的原生<img>元素
• 如果不需要NextJS Image的优化特性，可以添加unoptimized属性，让组件直接渲染为原生<img>标签，这样样式就能和另外两个img保持一致
• 避免依赖组件的DOM结构，改用NextJS Image的style属性直接传递内联样式（不推荐大规模使用，维护性差）

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