react如何引入图片

在React中引入图片的方法

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

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

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

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

function ImageComponent({ imageName }) {
  const imagePath = require(`./assets/${imageName}.png`);
  return <img src={imagePath} alt={imageName} />;
}

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

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

注意：public目录中的文件不会被webpack处理，需手动管理缓存问题。

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

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

注意事项

• 使用create-react-app创建的项目默认支持常见图片格式（png/jpg/svg等）
• SVG文件可作为React组件直接引入：

  import { ReactComponent as Logo } from './logo.svg';

• 生产环境建议对图片进行压缩优化
• 动态路径需考虑webpack的上下文限制