React TypeScript项目中导入图片资源遇TS2322及ESLint错误的解决方法咨询

你遇到的TS2322错误根源很明确：import()是动态导入语法，它返回的是一个Promise对象，而<img>标签的src属性需要的是字符串类型的图片路径，类型不匹配自然就触发了报错。同时你用require()能运行但触发ESLint错误，是因为ESLint的@typescript-eslint/no-var-requires规则禁止了CommonJS风格的require，推荐使用ES模块的import语法。

下面给你几种靠谱的解决方案，按推荐优先级排序：

1. 静态导入（最推荐，适合已知固定图片路径的场景） #

直接用ES模块的import语法导入图片，TypeScript在配置正确的情况下会自动识别图片模块，返回的就是字符串格式的图片路径，完美匹配src的类型要求。

import React, { FC } from "react";
import "./barkingRoad.scss";
// 静态导入图片，直接得到字符串路径
import slidex from "./../../../../assets/images/small/boomerang-site1.jpg";

const BarkingRoad: FC = () => {
  return (
    <div className="boomerang-slider-barkingRoad">
      <div className="project-data">
        <div className="boomerang-site-slide">
          <div className="prev"><a href="#">Previous</a></div>
          <div>
            <img src={slidex} alt="Boomerang site" /> {/* 这里不会再报错 */}
          </div>
          <div className="next"><a href="#">Next</a></div>
        </div>
      </div>
    </div>
  )
}

export default BarkingRoad;

补充：确保TypeScript能识别图片模块 #

如果你的TypeScript还没配置图片类型声明，可能会出现找不到模块的错误。可以在项目根目录或src文件夹下创建一个declarations.d.ts文件，添加以下内容：

// src/declarations.d.ts
declare module "*.jpg" {
  const value: string;
  export default value;
}
declare module "*.jpeg" {
  const value: string;
  export default value;
}
declare module "*.png" {
  const value: string;
  export default value;
}
// 根据你的需求添加其他图片格式，比如svg、gif等

2. 动态导入的正确用法（适合需要根据条件加载图片的场景） #

如果确实需要动态加载图片（比如根据用户交互或状态切换不同图片），你需要结合useState和useEffect来处理import()返回的Promise，等图片路径加载完成后再赋值给src：

import React, { FC, useState, useEffect } from "react";
import "./barkingRoad.scss";

const BarkingRoad: FC = () => {
  const [slidex, setSlidex] = useState<string>("");

  useEffect(() => {
    // 动态导入图片，等待Promise解析后设置路径
    import("./../../../../assets/images/small/boomerang-site1.jpg")
      .then((module) => setSlidex(module.default))
      .catch(err => console.error("Failed to load image:", err));
  }, []);

  return (
    <div className="boomerang-slider-barkingRoad">
      <div className="project-data">
        <div className="boomerang-site-slide">
          <div className="prev"><a href="#">Previous</a></div>
          <div>
            {/* 可以添加加载状态，避免初始空src的问题 */}
            {slidex ? <img src={slidex} alt="Boomerang site" /> : <div>Loading image...</div>}
          </div>
          <div className="next"><a href="#">Next</a></div>
        </div>
      </div>
    </div>
  )
}

export default BarkingRoad;

3. 临时忽略ESLint错误（不推荐，仅作应急方案） #

如果你暂时不想改代码，也可以在require语句上方添加ESLint注释来忽略该规则：

// eslint-disable-next-line @typescript-eslint/no-var-requires
const slidex = require("./../../../../assets/images/small/boomerang-site1.jpg");

但这种方式不符合TypeScript和ES模块的最佳实践，不建议长期使用。

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