react如何引入本地的图片

在React中引入本地图片的方法

使用import语句导入图片
将图片文件放在项目目录中（如src/assets），通过import语句引入：

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

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

使用require语法动态导入
适用于条件渲染或动态路径场景：

const imagePath = require(`./assets/${fileName}.png`);

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

通过public目录引用
将图片放入public文件夹，直接使用相对路径：

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

CSS背景图引入
在CSS模块中通过相对路径引用：

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

注意事项

• Create React App项目默认支持图片导入
• 使用Webpack时需要配置file-loader处理图片
• SVG文件可作为React组件直接导入
• 生产环境构建时会优化图片路径