React中图片数组无法加载至Imagecarrusell组件问题求助

核心问题与修复步骤： #

1. 属性名不匹配
   你的SliderData数组中图片路径字段是src，但GallerySlider组件里却用了slide.image获取路径，直接导致找不到图片地址。将组件中的slide.image改为slide.src即可。

2. 图片路径规范

   • 存放在public目录下的图片，路径需从根目录开始（无需写public前缀），比如/images/gallery/Bild1.jpg——React打包后public目录内容会直接映射到项目根路径。
   • 存放在src目录下的图片，不能直接写相对路径，需用require动态引入才能被打包工具识别。如果要统一用数组管理，写法如下：

     {src: require('./components/Assests/Bild2.jpg'), title: 'img1'}
     

   建议统一图片存放位置，要么全放public，要么全放src，避免路径混乱。

3. 数组语法错误
   SliderData数组里倒数第二个元素（Bild7.jpg）末尾缺少逗号，会触发JS语法报错，补上逗号即可。

修复后代码示例： #

SliderData.js

export const SliderData = [
  {src: '/images/gallery/Bild1.jpg', title: 'img1'},
  {src: require('./components/Assests/Bild2.jpg'), title: 'img1'},
  {src: require('./components/Assests/Bild3.jpg'), title: 'img1'},
  {src: '/images/gallery/Bild4.jpg', title: 'img1'},
  {src: '/images/gallery/Bild5.jpg', title: 'img1'},
  {src: '/images/gallery/Bild6.jpg', title: 'img1'},
  {src: '/images/gallery/Bild7.jpg', title: 'img1'},
  {src: '/images/gallery/Bild6.jpg', title: 'img1'},
]

GallerySlider.js

import React from 'react'
import { SliderData } from './SliderData'

const GallerySlider = () => {
  return (
    <>
      {SliderData.map((slide, index) => {
        return (
          <img key={index} src={slide.src} alt={slide.title} />
        )
      })}
    </>
  )
}

export default GallerySlider  

额外补充：给列表渲染的img标签加上key属性，符合React列表渲染规范，避免控制台警告。

内容的提问来源于stack exchange，提问作者Michael Keip