如何在next.js中删除next/image中的包装跨度

Question

我正在学习Next.js，我发现next/image正在用两个跨度包装img，并向img标记添加内联样式，这将覆盖我的类样式

如何删除内联样式和包装HTML标记(如spans和divs(？

我的代码看起来像

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

结果

<span style="box-sizing: border-box; display: inline-block; overflow: hidden; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: relative; max-width: 100%;">
<span style="box-sizing: border-box; display: inline-block; overflow: hidden; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: relative; max-width: 100%;">
<img alt="" src="/_next/image?url=%sq=75" decoding="async" data-nimg="intrinsic" class="imgBack" style="position: absolute; inset: 0px; box-sizing: border-box; padding: 0px; border: none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;" srcset="/_next/image?url=%2F_next%s;q=75 1x, /_next/image?url=%2F_next%s;q=75 2x">
</span>
<span>

预期结果

<img src="./myImg" class="imgBack" alt="" width="160" height="160" />

我已经阅读了next/image文档，但找不到解决问题的方法。

Answer 1

使用next/future/image

注意：在Next.js 13中，next/future/image已转换为next/image，以上不再是问题。

从Next.js 12.3中，您可以使用新的next/future/image组件，默认情况下，该组件会呈现单个<img>元素，而不需要任何额外的<div>或<span>包装器。

请注意，在Next.js 12.2.x中，next/future/image组件仍然是实验性的，需要在next.config.js中启用。

module.exports = {
experimental: {
images: {
allowFutureImage: true
}
},
// Rest of the config
}

---

使用next/image和layout="raw"

在12.2.0版本之前和12.1.1版本之后，可以使用实验layout="raw"模式在没有包装或样式的情况下渲染图像。

要启用原始布局模式，请将以下内容添加到next.config.js:

module.exports = {
experimental: {
images: {
layoutRaw: true
}
},
// Rest of the config
};

然后在Image组件中使用layout="raw"。

<Image 
className="imgBack" 
src={myImg} 
width="160" 
height="160" 
alt="" 
layout="raw" 
/>

Answer 2

在从nextjs-11迁移到nextjs-12时遇到了类似的问题。Nextjs 12使用span而不是div，因此只需更新您的CSS文件

.myImg > span {
//Your CSS 
}

Answer 3

如果您使用更新的Next JS ，请执行以下操作

在组件中：

import Image from "next/future/image";

在next.config.js:中

const nextConfig = {
...
experimental: {
images: {
allowFutureImage: true,
},
},
};

快乐编码！

Answer 4

如果您想对img标签进行一些自定义样式设置，请使用以下CSS技巧：

index.jsx:

<div className={classes.imageWrapper}>
<Image
width={"42"}
height={"42"}
src={"/images/profile/mock-face-2.jpg"}
alt="mock profile picture"
/>
</div>

styles.module.css:

.imageWrapper img {
border-radius: 50%;
}