react 中 如何引入图片

在 React 中引入图片的方法

使用 import 直接引入

通过 import 将图片作为模块引入，适用于静态资源。这种方式会在构建时处理图片路径。

import logo from './logo.png';

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

使用 require 动态引入

适用于需要动态加载图片的场景，但需注意 require 在 ES Modules 中可能需要额外配置。

function App() {
  const imagePath = require('./image.jpg');
  return <img src={imagePath} alt="Dynamic Image" />;
}

直接使用公共路径

如果图片位于 public 文件夹，可直接通过相对路径引用。注意路径需从 public 开始计算。

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

使用 CSS 背景图

通过 CSS 引入图片，适合需要背景图的场景。

import './styles.css';

function App() {
  return <div className="background-image"></div>;
}

对应的 CSS 文件：

.background-image {
  background-image: url('./background.jpg');
  width: 100px;
  height: 100px;
}

动态路径拼接

当图片路径需要根据变量动态生成时，确保路径正确且文件存在。

function App({ imageName }) {
  return <img src={`/images/${imageName}.jpg`} alt="Dynamic Path" />;
}

注意事项

• 使用 import 或 require 时，图片会被 webpack 处理并优化。
• 直接引用 public 文件夹的图片不会被 webpack 处理，需手动管理。
• 动态路径需确保文件存在，否则会导致加载失败。
• 对于 SVG 文件，可转换为 React 组件以获得更好的控制。