Svelte项目本地图片加载出现404错误，求解决方法

你在Svelte项目里引用本地图片时出现404错误，请求路径/image/Banner.png找不到资源，可按以下方式排查解决：

• 核对文件实际存放路径
  先确认Banner.png的真实位置：如果你的组件文件在src目录下（比如src/routes/+page.svelte），而图片放在项目根目录的image文件夹，那./image/Banner.png的路径是对的，但如果图片是放在src/image目录，那相对路径要改成../image/Banner.png。

• 用Svelte推荐的资源导入方式
  直接导入图片资源是最稳妥的方式，能避免路径混乱，Vite会自动处理资源路径：

  <script>
      // 路径根据组件和图片的相对位置调整
      import bannerImg from './image/Banner.png';
  </script>
  
  <main>
      <header>
          <div class="Banner">
              <div class="banner-img">
                  <img src={bannerImg} alt="页面横幅">
              </div>
              <div class="banner-text"></div>
          </div>
      </header>
  </main>
  

• 利用静态资源目录（针对SvelteKit）
  如果是SvelteKit项目，把image文件夹放到项目根目录的static文件夹下，之后直接用绝对路径引用即可：

  <script>
      const src = '/image/Banner.png';
  </script>
  

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