在反应中加载添加到对象数组中的本地图像的问题

Question

我创建了一个名为 SliderImgs 的 #JS 文件，并将对象数组放入其中，其中包含滑块图像的属性：

const Images=[
    {
        src:'./files/new-banner-high.jpg',
        alt:'banner',
        order:'0'
    }
]
export default Images

然后我将这个数组导入到一个组件，然后将它（数组）从 props 传递到另一个名为 Slider 的组件

import React, { Component } from 'react'
import Images from './SliderImgs'
import Slider from './Slider'

 class Body extends Component {

  render() {
    return (
      <div>
        <div className="slider">
          <Slider pictures={Images}/>
        </div>
      </div>
    )
  }
}
export default Body

最后尝试使用 map() 方法在屏幕上打印图像，但出现此错误： 未捕获错误：找不到模块'./files/new-banner-high.jpg'

import React, { Component } from 'react'

 class Slider extends Component {
    constructor(props){
        super(props);
        this.state ={
          pictures:[]
        }
     }
     static getDerivedStateFromProps(props, state){
      return {pictures : props.pictures }
    ;
    }
  render() {
    return (
      <div className="slidercontainer">
          {this.state.pictures.map((picture, index)=> {
              return(
                  <img src={require(picture.src)} alt={picture.alt} key={index} />
              )
          })}
      </div>
    )
  }
}
export default Slider

Answer 1

通常图像应保存在 public 文件夹中。

将 files 目录移动到 public 文件夹。
如下更改数组。

const Images=[
    {
        src:'/files/new-banner-high.jpg',
        alt:'banner',
        order:'0'
    }
]

更改 img 元素，如下所示。

<img src={picture.src} alt={picture.alt} key={index} />

在反应中加载添加到对象数组中的本地图像的问题

Problem with loading local images added in object array in react

javascript

jsx

reactjs