将字符串数组作为图像源传递

Question

我正在尝试传递要连接到 URL 地址的字符串值数组，以创建内联图像块。我有以下几点：

          <div className="row text-center">
            { this.state.sketchs.map((sketch, key) => {
              return(
                <div key={key} className="col-md-3 mb-3">
                  <div className="token" img src={{ 'https://ipfs.infura.io/ipfs/' : sketch }}></div>
                  <div>{sketch}</div>
                </div>
              )
            })}
          </div>

css文件有以下内容：

.token {
  height: 150px;
  width: 150px;
  border-radius: 50%;
  display: inline-block;
}

我成功地将数组“草图”推送到下面以蓝色突出显示的“令牌”中。

但我希望将突出显示的蓝色“散列”用作 img 源，并在每个源的开头加上“https://ipfs.infura.io/ipfs/”。

我将如何实现这一目标？为什么我的代码在上面不起作用？任何帮助，将不胜感激！

Answer 1

确保您的标记img是正确的：

 <div className="row text-center">
            { this.state.sketchs.map((sketch, key) => {
              return(
                <div key={key} className="col-md-3 mb-3">
                  <div className="token">
                     <img src={'https://ipfs.infura.io/ipfs/' + sketch }>
                   </div>
                  <div>{sketch}</div>
                </div>
              )
            })}
          </div>