Nextjs <Image/> 与 <img/> 标签不一样答案

【问题标题】：Nextjs <Image/> doesn't work same as <img/> tagNextjs <Image/> 与 <img/> 标签不一样
【发布时间】：2023-02-03 01:33:40
【问题描述】：

我正在看 nextjs 教程，我需要像教程视频一样添加图像。但是当我添加 <Image/> 标签时，它的工作方式与教程不同。比起我尝试普通的 <img/> 标签，它起作用了。

这是我<Image/> 的标签

<Image
   src="https://links.papareact.com/f90"
   width:{150}
   height:{40}
   style={{ objectFit: "contain"}}
   className="cursor-pointer"
   alt="amazon logo"
  />

这是我<img/> 的标签

<img
  src="https://links.papareact.com/f90"
  style={{ objectFit: "contain", width: "150px", height: "40px" }}
  className="cursor-pointer"
  alt="amazon logo"
 />

为什么这两个彼此不一样？我怎样才能像第二个输出那样使用<Image />标签

【问题讨论】：

与其向我们展示屏幕截图，不如向我们展示渲染标记的差异。 HTML 有什么不同吗？是否应用了不同的样式？

标签： javascript reactjs next.js

【解决方案1】：

尝试在 <Image style={{width: "150px", height: "40px"}} /> 中使用 px 值，因为它会有所不同

【讨论】：