react如何引用图片

在React中引用图片的方法

使用import直接引入图片
将图片文件放在项目目录中（如src/assets），通过ES6的import语法引入：

import logo from './assets/logo.png';

function App() {
  return <img src={logo} alt="Logo" />;
}

通过require动态引入（适用于类组件）
在类组件或需要条件渲染时可用：

const imgPath = require('./assets/image.jpg').default;

function Component() {
  return <img src={imgPath} alt="Dynamic" />;
}

使用public目录中的图片
放置在public文件夹下的图片可通过绝对路径访问：

<img src="/images/photo.jpg" alt="Public" />

注意：修改public目录文件不会触发React重新编译。

CSS背景图片引用
通过CSS模块化引入：

import styles from './styles.module.css';
// CSS文件中：background-image: url(./bg.png);

function Component() {
  return <div className={styles.banner}></div>;
}

注意事项

• Webpack会对import的图片进行打包处理，生成哈希文件名优化缓存
• 动态路径拼接时建议使用require.context或第三方加载器
• SVG文件可直接作为React组件使用，需配合@svgr/webpack等工具