react如何引入多个图片

在 React 中引入多个图片的方法

方法一：直接导入图片并引用
将图片文件放在项目目录（如 src/assets 或 public 文件夹），通过 import 语句逐一导入。

import image1 from './assets/image1.jpg';
import image2 from './assets/image2.png';

function App() {
  return (
    <div>
      <img src={image1} alt="Image 1" />
      <img src={image2} alt="Image 2" />
    </div>
  );
}

方法二：使用 require.context 动态批量导入
适用于需要动态加载大量图片的场景，通过 Webpack 的 require.context 实现。

function importAll(r) {
  return r.keys().map(r);
}

const images = importAll(require.context('./assets', false, /\.(png|jpe?g|svg)$/));

function App() {
  return (
    <div>
      {images.map((image, index) => (
        <img key={index} src={image} alt={`Image ${index}`} />
      ))}
    </div>
  );
}

方法三：通过 public 文件夹直接引用
将图片放入 public 文件夹，直接通过相对路径引用。

function App() {
  return (
    <div>
      <img src="/images/image1.jpg" alt="Image 1" />
      <img src="/images/image2.png" alt="Image 2" />
    </div>
  );
}

方法四：使用外部 URL 或 CDN
直接引用网络图片链接。

function App() {
  return (
    <div>
      <img src="https://example.com/image1.jpg" alt="Image 1" />
      <img src="https://example.com/image2.png" alt="Image 2" />
    </div>
  );
}

注意事项

• 性能优化：大量图片建议使用懒加载（如 react-lazyload）或按需加载。
• 路径问题：确保路径正确，public 文件夹中的文件需以 / 开头。
• 文件类型：支持常见格式（如 .jpg, .png, .svg）。