能否在Next.js项目中弃用next/Image组件？使用中遇诸多困扰

当然可以，Next.js并没有强制要求必须使用next/Image，你完全可以用原生<img>标签替代，甚至自己封装组件来适配需求。

直接用原生<img>实现响应式 #

直接编写标准的<img>标签，配合CSS就能搞定移动端和桌面端的尺寸适配：

<!-- 基础用法 -->
<img src="/assets/hero.jpg" alt="首页横幅" />

<!-- 响应式适配 -->
<style>
  .responsive-image {
    width: 100%;
    height: auto;
    max-width: 1200px;
  }
  @media (max-width: 768px) {
    .responsive-image {
      max-width: 100%;
    }
  }
</style>
<img src="/assets/hero.jpg" alt="首页横幅" class="responsive-image" />

手动优化图片性能（替代next/Image的核心功能） #

如果担心原生<img>的性能问题，可以自己实现next/Image的关键优化点：

• 多分辨率适配：用<picture>标签加载对应尺寸的图片，减少移动端带宽消耗：

  <picture>
    <source media="(max-width: 767px)" srcset="/assets/hero-mobile.jpg 1x, /assets/hero-mobile@2x.jpg 2x">
    <source media="(min-width: 768px)" srcset="/assets/hero-desktop.jpg 1x, /assets/hero-desktop@2x.jpg 2x">
    <img src="/assets/hero-desktop.jpg" alt="首页横幅" class="responsive-image">
  </picture>
  

• 懒加载：用浏览器原生的loading="lazy"属性实现图片懒加载：

  <img src="/assets/hero.jpg" alt="首页横幅" class="responsive-image" loading="lazy" />
  

关于你遇到的next/Image报错 #

既然next/Image给你带来了额外的配置负担，直接替换成原生标签是最省心的方案——不用再处理大量组件的尺寸配置，也能避开这类类型报错。

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