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

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正确：&nbsp;<div className="row text-center">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { this.state.sketchs.map((sketch, key) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div key={key} className="col-md-3 mb-3">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="token">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<img src={'https://ipfs.infura.io/ipfs/' + sketch }>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>{sketch}</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>

Answer 2

首先，您将<img />标签放在了错误的位置。尝试使用反引号 `` 并像这样连接字符串：<img src={`https://ipfs.infura.io/ipfs/${sketch}`} />在 src 链接和连接的字符串周围加反引号。