当前位置：首页 > React

react如何引入多个图片

2026-03-31 13:55:47React

引入多个图片的方法

在React中引入多个图片可以通过以下几种方式实现，每种方法适用于不同的场景和需求。

使用import直接引入

将所有图片文件通过import语句引入，适合图片数量较少且固定的情况。

react如何引入多个图片

import image1 from './images/image1.jpg';
import image2 from './images/image2.jpg';
import image3 from './images/image3.jpg';

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

动态导入图片

使用require.context动态加载图片文件夹中的所有图片，适合图片数量较多或需要动态加载的情况。

react如何引入多个图片

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

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

使用公共文件夹

将图片放入public文件夹，通过相对路径直接引用，适合不需要构建处理的静态资源。

function ImageGallery() {
  const imageNames = ['image1.jpg', 'image2.jpg', 'image3.jpg'];

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

使用第三方服务

将图片托管在CDN或云存储服务，直接通过URL引用。

const imageUrls = [
  'https://example.com/image1.jpg',
  'https://example.com/image2.jpg',
  'https://example.com/image3.jpg'
];

function ImageGallery() {
  return (
    <div>
      {imageUrls.map((url, index) => (
        <img key={index} src={url} alt={`Image ${index}`} />
      ))}
    </div>
  );
}