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

【问题标题】：Pass string array as image source传递字符串数组作为图像源
【发布时间】：2020-11-09 07:25:41
【问题描述】：

我正在尝试传递要连接到 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;
}

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

但我希望突出显示的蓝色“哈希”用作 img 源，每个开头都带有“https://ipfs.infura.io/ipfs/”。

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

【问题讨论】：

你的 URL 是一个对象，它需要是一个字符串。 {'https://ipfs.infura.io/ipfs/' + sketch}

标签： javascript html arrays reactjs

【解决方案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>

【讨论】：

【解决方案2】：

首先，你把<img />标签放错地方了。

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

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

【讨论】：