react如何引入图片

在React中引入图片的方法

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

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

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

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

function App({ imageName }) {
  const imagePath = require(`./images/${imageName}.png`);
  return <img src={imagePath} alt="Dynamic" />;
}

使用public目录的绝对路径
将图片放在public目录中，通过绝对路径引用：

function App() {
  return <img src="/images/logo.png" alt="Public Image" />;
}

CSS背景图引入
在CSS模块中引入图片作为背景：

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

import styles from './styles.module.css';
function App() {
  return <div className={styles.banner}></div>;
}

注意事项

• Webpack会处理import和require的图片，生成优化后的文件名（含哈希）。
• public目录中的文件不会被Webpack处理，适合不变的静态资源。
• 动态require可能导致打包体积增大，需谨慎使用。