React中如何将字符串数组拼接为图片URL？代码问题排查

首先看你当前代码的两个核心问题：

• 你把img当成了div的属性来写，这是错误的——图片需要用<img>标签来渲染，而不是给div添加img属性
• 图片源src的写法有误，你现在用了对象的写法{{ 'https://ipfs.infura.io/ipfs/' : sketch }}，这完全不符合图片src的要求，我们需要直接拼接成完整的URL字符串

修正后的完整JSX代码 #

<div className="row text-center">
  {this.state.sketchs.map((sketch, key) => {
    // 拼接完整的IPFS图片地址
    const imgUrl = `https://ipfs.infura.io/ipfs/${sketch}`;
    return (
      <div key={key} className="col-md-3 mb-3">
        {/* 使用img标签渲染图片，把拼接好的地址传给src */}
        <img src={imgUrl} alt={sketch} className="token" />
        <div>{sketch}</div>
      </div>
    );
  })}
</div>

你的CSS代码可以保持不变 #

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

关键修改点说明 #

1. 正确使用<img>标签：原来的div标签不能用来显示图片，必须替换成标准的<img>标签，这样浏览器才能识别并加载图片资源
2. 字符串拼接生成图片地址：用模板字符串（反引号`）把前缀和哈希值拼接成完整的URL，这样src就能拿到正确的图片路径
3. 添加alt属性：这是图片标签的必填属性（从可访问性角度出发），这里直接用哈希值作为替代文本，也可以换成更友好的描述

这样修改后，你的组件就能正确渲染每个IPFS哈希对应的图片了。

内容的提问来源于stack exchange，提问作者Simon Palmer