react 中 如何引入图片

使用 import 直接引入图片

在 React 中可以通过 import 直接引入图片文件，适用于静态资源。引入后，图片会被处理为模块，并返回一个引用路径。

import logo from './logo.png';

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

使用 require 动态引入图片

对于需要动态加载的图片，可以使用 require 语法。注意：这种方式在 Create React App 中可能需要配置。

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

通过 public 文件夹直接引用

将图片放在 public 文件夹中，可以直接通过相对路径引用。适用于不需要打包处理的资源。

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

使用 CSS 背景图片

通过 CSS 引入图片，适用于需要样式化的场景。需注意路径相对于 CSS 文件。

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

// App.jsx
import './App.css';
function App() {
  return <div className="banner"></div>;
}

使用第三方库（如 url-loader 或 file-loader）

在 Webpack 配置中通过 url-loader 或 file-loader 处理图片，适用于需要优化或转换的场景。

// webpack.config.js
module: {
  rules: [
    {
      test: /\.(png|jpe?g|gif)$/i,
      use: [
        {
          loader: 'file-loader',
        },
      ],
    },
  ],
}

注意事项

• 路径问题：确保路径正确，相对路径基于当前文件位置。
• 性能优化：大图片建议压缩或使用懒加载。
• 动态路径：动态引入时需确保文件存在，否则会报错。

以上方法覆盖了 React 中常见的图片引入场景，可根据具体需求选择合适的方式。