当前位置：首页 > React

react多个图片如何循环

2026-03-31 15:30:57React

使用 `map` 方法循环渲染图片列表

在 React 中，可以通过 map 方法遍历图片数组，动态生成 img 元素。假设图片数据以数组形式存储：

const images = [
  { id: 1, url: "image1.jpg", alt: "Image 1" },
  { id: 2, url: "image2.jpg", alt: "Image 2" },
  { id: 3, url: "image3.jpg", alt: "Image 3" }
];

function ImageGallery() {
  return (
    <div>
      {images.map((image) => (
        <img 
          key={image.id} 
          src={image.url} 
          alt={image.alt} 
        />
      ))}
    </div>
  );
}

动态加载本地图片资源

若图片存储在本地 public 或 src 目录，需通过 require 或 import 引入路径：

import image1 from "./assets/image1.jpg";
import image2 from "./assets/image2.jpg";

const localImages = [
  { id: 1, src: image1, alt: "Local 1" },
  { id: 2, src: image2, alt: "Local 2" }
];

function LocalImageGallery() {
  return (
    <div>
      {localImages.map((item) => (
        <img key={item.id} src={item.src} alt={item.alt} />
      ))}
    </div>
  );
}

结合 CSS 实现图片布局

通过添加样式类名或行内样式控制图片排列方式。例如使用 Flexbox 实现水平排列：

<div style={{ display: "flex", gap: "10px" }}>
  {images.map((image) => (
    <img 
      key={image.id}
      src={image.url}
      alt={image.alt}
      style={{ width: "200px", height: "auto" }}
    />
  ))}
</div>

懒加载优化性能

对于大量图片，使用 loading="lazy" 属性实现延迟加载：

{images.map((image) => (
  <img
    key={image.id}
    src={image.url}
    alt={image.alt}
    loading="lazy"
  />
))}

处理动态图片路径

若图片路径需要拼接，可使用模板字符串动态生成：

react多个图片如何循环

const baseUrl = "https://example.com/images/";
const dynamicImages = ["photo1.jpg", "photo2.jpg"];

{dynamicImages.map((fileName, index) => (
  <img 
    key={index} 
    src={`${baseUrl}${fileName}`} 
    alt={`Dynamic ${index}`} 
  />
))}