导入图片报错了？TypeScript如是说

Typescript项目中import图片报错：详解与解决方案

相信许多小伙伴在使用Typescript时，都遇到过Cannot find module '.../*.png'这样的报错。今天，我们就来深入浅出地探究这个问题，并提供一劳永逸的解决方案。

报错原因

当我们使用Typescript导入本地图片时，可能会遇到如下的错误提示：

Cannot find module '.../*.png'

这个错误意味着Typescript无法找到我们指定的图片模块。原因可能是：

• 文件路径不正确： 确保图片路径正确无误。
• 文件扩展名未指定： 在Typescript中导入图片时，需要明确指定文件扩展名，如.png或.jpg。
• 未配置webpack或vite： 在现代的Typescript项目中，通常使用webpack或vite等工具来处理静态资源，如果未正确配置，会导致图片导入失败。

解决方案

根据不同的情况，我们可以采取不同的解决方案：

1. 检查文件路径和扩展名

仔细检查图片路径是否正确，并确保指定了正确的文件扩展名。例如：

import image from './assets/img/my-image.png';

2. 配置webpack或vite

如果使用webpack或vite，需要确保正确配置了处理静态资源的规则。对于webpack，可以在webpack.config.js中添加如下配置：

{
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        loader: 'file-loader',
      },
    ],
  },
}

对于vite，可以在vite.config.js中添加如下配置：

{
  build: {
    rollupOptions: {
      input: {
        index: resolve(__dirname, 'index.html'),
        login: resolve(__dirname, 'login.html'),
      },
      output: {
        assetFileNames: '[name].[ext]',
      },
    },
  },
}

3. 启用Typescript的moduleResolution选项

Typescript的moduleResolution选项可以帮助我们解析模块路径。在tsconfig.json文件中，将moduleResolution选项设置为"node"：

{
  "compilerOptions": {
    "moduleResolution": "node"
  }
}

结语

通过以上步骤，我们应该可以解决Typescript项目中导入图片时的报错问题。希望本文能对您有所帮助，让您的Typescript开发之路更加顺畅。