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

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>

Answer 2

首先，您将<img />标签放在了错误的位置。

尝试使用反引号 `` 并像这样连接字符串：

<img src={`https://ipfs.infura.io/ipfs/${sketch}`} />

在 src 链接和连接的字符串周围加反引号。