Question

朋友。请参阅我在下面写的地图功能。我的目标是在this.state.sports数组中为每个运动渲染一个图像。我已经编写了一些功能来记录一个可以捕获相应图像路径的变量，其中的图像位于我的仓库中（目前只有一个用于棒球的测试，但我知道我必须把其他的在那里最终），但它没有渲染。我只得到空白图像符号。所有的控制台日志都准确地回复了我想要的东西（所以它不是不正确地选择正确的数据），但它仍然无法正常工作。

this.state.sports.map((sport) => {    
     let imgPath = " ";
     if(/\s/g.test(sport.name.toLowerCase())){                                        
        imgPath = '../' + sport.name.replace(/\s/g, '').toLowerCase() + '.png'
      } else {
        imgPath = '../' + sport.name.toLowerCase() + '.png'
      }   

      return(
          <div>
            <img src={imgPath} />
            <button className="sport-button" onClick={() => this.deleteSport(sport.id)}>
              {sport.name}
            </button>                         
          </div>
         )   
       })

这里是我的棒球图像存储位置 - 用于确认路径是否正确。此映射显示在List.js组件中。

Aaaand我在网页上看到的内容......

Answer 1

图片通常会进入您的Unit: milliseconds expr min lq mean median uq max neval old 17.658398 18.492957 21.292965 19.396304 21.770249 133.215223 100 new_simple 6.742158 7.013732 7.638155 7.190095 7.759104 12.640237 100 new_fast 4.064907 4.266243 4.837131 4.507865 4.871533 9.442904 100 tidyverse 4.980664 5.326694 6.004602 5.552611 6.215129 9.923524 100文件夹，甚至更好public。 public/images是您可以通过网址放置您想要访问的任何文件的位置（图像就是其中之一）。

然后你可以像以下一样引用它们：

public

Answer 2

您也可以使用require（）。

    imgPath = '../' + sport.name.toLowerCase() + '.png'

    ...

    // Only add this line after setting imgPath
    imgPath = require(imagePath)

    ....

            <img src={imgPath} />

为什么我的功能无法有条件地渲染图像？

2 个答案: