如何解决静态图片Import/no-unresolved lint错误：多倍图路径匹配问题

我之前在做响应式图片项目的时候也碰到过一模一样的问题！给你几个实用的解决思路，你可以根据自己的项目情况选：

方案1：给构建工具加解析规则（Webpack/Vite适用） #

如果你的项目用Webpack或者Vite，直接配置模块解析规则，就能让工具自动把logo.png的导入映射到对应的@1x/@2x文件上：

• Webpack配置：在webpack.config.js里的resolve.alias加个映射，比如优先用2x版本：

// webpack.config.js
const path = require('path');

module.exports = {
  // ...其他配置
  resolve: {
    alias: {
      '../../assets/logo/logo.png$': path.resolve(__dirname, '../../assets/logo/logo@2x.png')
    }
  }
};

要是需要根据环境切换分辨率版本，还可以写个简单的条件判断，或者自定义解析插件来自动查找对应的文件后缀。

• Vite配置：在vite.config.js里做类似的别名映射就行：

// vite.config.js
import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '../../assets/logo/logo.png': path.resolve(__dirname, '../../assets/logo/logo@2x.png'),
      // 要是需要1x版本，再加一条映射或者用环境变量判断
    }
  }
});

方案2：调整ESLint配置解决"No Unresolved Module"错误 #

如果是ESLint的import/no-unresolved规则在报错，你可以让ESLint跟着构建工具的规则走，或者直接告诉它去哪里找对应文件：

比如用eslint-import-resolver-webpack插件，让ESLint复用Webpack的解析配置，这样它就不会再报错了：

// .eslintrc.js
module.exports = {
  settings: {
    'import/resolver': {
      webpack: {
        config: 'webpack.config.js' // 指向你的Webpack配置文件
      }
    }
  }
};

要是不想装插件，也可以暂时忽略这个特定文件的报错（不过不推荐长期这么做）：

// .eslintrc.js
module.exports = {
  rules: {
    'import/no-unresolved': ['error', { ignore: ['../../assets/logo/logo.png'] }]
  }
};

方案3：用响应式图片工具自动处理 #

如果你的项目经常要处理多分辨率图片，直接用专门的工具会更省心，比如Webpack的responsive-loader或者Vite的vite-plugin-responsive-images。这些工具能自动识别@1x/@2x的文件，你导入logo.png的时候，它会自动匹配对应的分辨率版本，同时也能让lint工具识别到正确的文件路径。

举个Webpack用responsive-loader的例子：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg)$/,
        loader: 'responsive-loader',
        options: {
          adapter: require('responsive-loader/sharp'),
          sizes: [1, 2] // 对应@1x和@2x版本
        }
      }
    ]
  }
};

方案4：直接重命名文件（最省事的办法） #

如果上面的配置都觉得麻烦，最直接的就是把其中一个版本重命名成logo.png，比如把logo@2x.png改成logo.png，保留logo@1x.png作为低分辨率版本。这样导入路径和文件系统完全匹配，lint错误直接就消失了——不过这个方法只适合不需要同时在代码里区分两个版本的场景。

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