Question

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

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

正如上面的评论所说，如果我要将变量插入p标签之类的东西，imageStore [i]会打印出图像的名称（mars.png）。但是我一直收到错误消息：

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

甚至更奇怪，当应用程序最初呈现时，我可以清楚地看到图像在错误消息出现之前很短的时间内存在，这意味着它根本没有被定义。

我按如下方式推送数组中的项目：

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

我不确定这是否是问题，因为我已经完成了与其他2个数组完全相同的代码并且它运行良好：

Screenshot of how the app renders so far

其他两个字段（TEST 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]}`)}/>

确保图像路径在BACK-TICKED字符串内，即`（除了转义字符之外）。

如果您仍然遇到问题，请尝试分享您的代码。

React - 动态渲染图像

2 个答案: