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实现完整解决方案。
