Question

我在从json文件渲染图像时遇到问题。我的数据的结构是这样的，我想映射并渲染图像，但遇到错误item.image.map is not a function。

"image": [
      "Apollo11PLSSSecondaryImage1.jpg", 
      "Apollo11PLSSSecondaryImage2.jpg"
    ],
"image": [
      ""
    ],

我尝试使用.filter代替，并且如果item.image为===“”返回null，也使用if else语句。

<ArtifactImg>
      {
         item.image.map( item => {
             if(item === "") {
          return "N/A";
        } else {
         return <img src={require(`../../../shared/images/ArtifactImages/${item}`)}></img>
             }
          })
      }
</ArtifactImg>

Answer 1

您要映射的图像属性，而不是项数组。从我所见，我想您必须执行以下操作：

<ArtifactImg>
      {
         items
           .filter((item) => !!item.image)
           .map((item) => {         
              return <img src={require(`../../../shared/images/ArtifactImages/${item.image}`)}></img>
           })
      }
</ArtifactImg>

如何从数组返回图像，并且如果数组为空字符串“”，则不返回任何内容

1 个答案: