VSCode无法识别视频路径致React项目视频无法导入显示问题

• 核对文件路径准确性
  按住Ctrl（Windows）/Cmd（Mac）点击代码里的../../images/text.webm路径，看能不能直接跳转到视频文件。如果跳不动，说明路径层级写错了，调整成正确的相对路径就行。

• 添加WebM类型声明文件
  在项目根目录新建typings文件夹，里面创建video.d.ts文件，写入以下内容：

  declare module '*.webm' {
    const src: string;
    export default src;
  }
  

  要是用的TypeScript，记得把typings文件夹加入tsconfig.json的include列表：

  {
    "include": ["src/**/*", "typings/**/*"]
  }
  

  这样VSCode就能识别WebM文件的导入类型了。

• 配置打包工具支持WebM

  • Vite用户：默认支持WebM，不用额外配置，只要文件路径对就行。
  • Webpack用户：在webpack.config.js里添加资源加载规则：

    module.exports = {
      module: {
        rules: [
          {
            test: /\.(webm)$/i,
            type: 'asset/resource',
          },
        ],
      },
    };
    

• 刷新VSCode缓存
  按Ctrl+Shift+P（Windows）/Cmd+Shift+P（Mac），输入TypeScript: Restart TS Server执行，或者直接重启VSCode，清除语言服务缓存。

• 验证视频文件完整性
  直接在浏览器里打开text.webm文件，确认视频能正常播放，排除文件损坏的可能。

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