如何在React.js中展示数组中的所有图片

你的代码目前只通过item.Img[0]获取了图片数组的第一个元素，所以仅能展示单张图片。要渲染数组内的全部图片，需要在遍历Data的基础上，再对每个数据项里的Img数组做一次遍历。

修改后的完整代码如下：

import React from 'react'
import "./Content.css"
import { Data } from './data'
const Content = () => {
  return (
    <div className='content'>
      {Data.map((item) => {
        return(
          <div className='text' key={item.name}>
            {/* 遍历当前数据项的图片数组，渲染所有图片 */}
            {item.Img.map((imgSrc, index) => (
              <img 
                src={imgSrc} 
                alt={`${item.name}的图片-${index}`} 
                key={index} 
              />
            ))}
          </div>
        )
      })}
    </div>
  )
}

export default Content

关键修改说明： #

• 外层Data.map()遍历每个数据项时，给包裹的div添加了key={item.name}作为唯一标识，符合React列表渲染的要求
• 新增内层item.Img.map()遍历当前项的所有图片资源，为每个图片生成独立的img标签
• 给每个img标签添加了key={index}（如果后续图片有唯一ID，建议替换为ID以提升性能），同时设置了有意义的alt文本，优化可访问性

内容的提问来源于stack exchange，提问作者Mohammad Noor