SvelteKit使用adapter-static构建时img标签绝对路径报404如何修复

SvelteKit 使用 adapter-static 构建时，仅会自动处理两类资源路径：

• CSS 中静态声明的 background 等 url 资源，Vite 会扫描到依赖并自动复制对应资源到构建产物
• JS/模板中通过 import 显式引入的资源
  你直接在变量中写死的绝对路径属于动态字符串，不会被构建工具的静态扫描识别，因此不会自动把 media 目录下的资源复制到 build 目录，导致构建时报404。

• 方案1：将 media 目录移动到项目根目录的 static 文件夹下
  adapter-static 构建时会默认将 static 目录下的所有文件原封不动复制到 build 根目录，不需要修改代码中原有的 /media/xxx.png 路径即可正常访问，是改造成本最低的方案。
• 方案2：显式导入图片资源
  如果不想把资源放到 static 目录，可以在组件中通过 import 引入图片，构建工具会自动处理资源路径并复制到构建产物：

<script>
    // 路径替换为你项目中gerb.png对应的实际相对路径
    import herbURL from './media/events/odessa/gerb.png'
</script>

<img src={herbURL} />

• 方案3：修改构建配置指定资源目录
  如果 media 目录位置不能调整，也可以在 svelte.config.js 中配置资源目录，让构建工具自动复制该目录下的所有内容到构建产物：

// svelte.config.js
import adapter from '@sveltejs/adapter-static';

export default {
  kit: {
    adapter: adapter(),
    files: {
      // 将media目录指定为静态资源目录，构建时会自动复制到build
      assets: 'media'
    }
  }
};

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