React -动态渲染图像

Question

我基本上是想通过连接url和一个包含图像名称的变量来动态上传图像：

<img src = {require(`./images/${imageStore[i]}`)}/>
// imageStore[i] prints the name of the image 

正如上面的注释所说，如果我在p标记之类的内容中插入变量，imageStorei会打印出图像的名称(mars.png)。然而，我一直收到错误消息：

Unhandled Rejection (Error): Cannot find module './undefined'.

更奇怪的是，当应用程序最初渲染时，我可以清楚地看到图像出现的时间很短，然后它就会出现错误消息，这意味着它根本不是未定义的。

我推送数组中的项，如下所示：

for(var i = 0; i < image.length; i++){
      imageStore.push(image[i])
    }

我不确定这是否是问题所在，因为我已经用另外两个数组做了完全相同的代码，它工作得很好：

Screenshot of how the app renders so far

另外两个字段(测试1和TEST2)是使用完全相同的过程生成的，只是没有require

const Product = (props) => {
    var imageStore = []
    var nameStore = []
    var priceStore = []
    var mixStore = []
    let image = props.imageProps
    let view = props.foodProps
    let prices = props.priceProps 

    for(var i = 0; i < view.length;i++){
      nameStore.push(view[i])
    }
    for(var i = 0; i < prices.length;i++){
      priceStore.push(prices[i])
    }
    for(var i = 0; i < image.length; i++){
      imageStore.push(image[i])
    }
    var urlLink =  nameStore
    console.log(urlLink,'imageURL')
    console.log(image)
    for(var i = 0; i < nameStore.length; i++){
      mixStore.push(
        <div className='imageWrapper'>
          <div className='photo'>
            <img src = {require(`./images/${imageStore[i]}`)}/>
          </div>
          <div className ='nameHolder'>
            {nameStore[i]}
          </div>
          <div className ='priceHolder'>
            {priceStore[i]}
          </div>
        </div>
      )
    }

    return(
      <div>
        <div className='productWrapper'>
          {mixStore}
          <div className='priceWrapper'>
          </div>
        </div>
      </div>
    )
  }

对这个问题有什么建议吗？

谢谢

Answer 1

我不确定你这里是否需要require。为什么不干脆这样做：

<img src = {`/images/${imageStore[i]}`}/>

Answer 2

您(下面)的代码中没有任何错误。

<img src = {require(`./images/${imageStore[i]}`)}/>

确保图像路径在带反勾的字符串中，即`(位于转义字符旁边)。

如果你仍然面临这个问题，试着分享你的代码，更好地理解。