react如何引图片

在React中引入图片的方法

使用import直接引入本地图片
将图片文件放在项目目录中（如src/assets），通过import引入后作为变量使用：

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

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

通过require动态引入
适用于条件渲染或动态路径的场景：

const imagePath = require(`./images/${fileName}.jpg`);

<img src={imagePath} alt="Dynamic Image" />

使用public目录的绝对路径
放置在public文件夹中的图片可通过绝对路径直接引用：

<img src="/images/logo.png" alt="Public Image" />

远程图片URL
直接使用网络图片链接：

<img src="https://example.com/image.jpg" alt="Remote Image" />

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

/* styles.module.css */
.banner {
  background-image: url('./assets/banner.jpg');
}

import styles from './styles.module.css';

<div className={styles.banner}></div>

注意事项

• 使用import或require时，Webpack会处理图片并生成哈希文件名，有利于缓存管理。
• public目录中的文件不会被Webpack处理，适合存放无需优化的静态资源。
• 动态路径需配合require.context或后端API实现完整解决方案。