如何在React+TypeScript+Webpack项目中使用静态图片？

替代base64引入图片、让代码更整洁，这里有几种适配你技术栈的可行方案：

方法一：Webpack 5+ 用Asset Modules处理图片 #

Webpack 5自带的Asset Modules可以替代传统的file-loader，配置简单还能自动管理资源：

1. 配置Webpack规则
   在你的webpack.config.ts里添加图片处理规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'images/[hash][ext][query]' // 打包后图片会输出到dist/images目录下
        }
      }
    ]
  }
};

2. 让TypeScript识别图片模块
   在src/types下新建images.d.ts文件，添加类型声明：

declare module '*.png' {
  const value: string;
  export default value;
}

declare module '*.jpg' {
  const value: string;
  export default value;
}

// 其他格式比如gif、svg可以按需添加

3. 在React组件中导入使用

import React from 'react';
import backgroundImg from './assets/background.jpg'; // 替换成你的图片实际路径

const MyComponent = () => {
  return (
    <div 
      style={{
        width: '100%',
        height: '500px',
        backgroundImage: `url(${backgroundImg})`,
        backgroundSize: 'cover'
      }}
    >
      {/* 组件内容 */}
    </div>
  );
};

export default MyComponent;

方法二：直接用public目录下的图片 #

如果图片放在项目根目录的public文件夹里，不需要额外配置Webpack，直接通过根路径引用：

import React from 'react';

const MyComponent = () => {
  return (
    <div 
      style={{
        width: '100%',
        height: '500px',
        backgroundImage: `url('/images/background.jpg')`, // 对应public/images/background.jpg
        backgroundSize: 'cover'
      }}
    >
      {/* 组件内容 */}
    </div>
  );
};

export default MyComponent;

注意：打包时public目录下的文件会直接复制到dist根目录，所以路径要和文件实际位置对应。

方法三：通过CSS类设置背景图 #

如果用CSS/SCSS写样式，也可以在样式文件里引用图片：

.bg-container {
  width: 100%;
  height: 500px;
  background-image: url('../assets/background.jpg'); // 相对样式文件的图片路径
  background-size: cover;
}

然后在组件中使用这个类：

import React from 'react';
import './MyComponent.scss';

const MyComponent = () => {
  return <div className="bg-container"></div>;
};

export default MyComponent;

这种方式同样需要Webpack的Asset Modules或file-loader配置来处理样式中的图片引用。

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