react如何引入图片

在React中引入图片的方法

使用import直接引入

通过ES6的import语法将图片作为模块引入，适用于Webpack等打包工具环境。这种方式会在构建时处理图片路径和优化。

import logo from './logo.png';

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

使用require动态引入

在需要动态加载图片或条件渲染时可以使用require语法，注意需要配置模块系统支持。

function App() {
  const imagePath = require('./images/' + imageName + '.jpg');
  return <img src={imagePath.default} alt="Dynamic" />;
}

直接使用public目录

将图片放在public目录下，通过绝对路径引用。这种方式适合不需要构建处理的静态资源。

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

使用在线URL

直接引用网络图片资源时，只需提供完整的URL地址即可。

function App() {
  return <img src="https://example.com/image.jpg" alt="Online" />;
}

CSS背景图片引入

通过CSS模块化方式引入图片，需要注意路径处理。

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

function App() {
  return <div className={styles.banner}></div>;
}

对应的CSS文件：

.banner {
  background-image: url('./banner.jpg');
}

SVG组件引入

将SVG文件作为React组件引入，需要配合相关loader配置。

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

function App() {
  return <Logo />;
}

每种方法适用于不同场景，选择时需考虑项目配置和具体需求。现代React项目通常推荐使用import方式，便于打包工具优化和路径管理。