图像未在列表中显示，反应

Posted 2023-02-25

【中文标题】图像未在列表中显示，反应

【英文标题】：Image not displaying inside List, React

【发布时间】：2020-03-02 08:38:02

【问题描述】：

我正在创建一个简单的 React 组件，它以列表/数组的形式显示图像。

来源如下图：

import React from "react";
import styled from "styled-components";
import burgerTop from "../../assets/images/burgerTop.png";
import burgerBottom from "../../assets/images/burgerBottom.png";

const BurgerComponent = props => 
  console.log(JSON.stringify(props));
  const BurgerDiv = styled.div`
    width: 500px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
  `;
  return (
    <BurgerDiv>
      props.burger.map(burgerItem => 
        console.log(burgerItem);
        const imgSrc = burgerItem.img;
        console.log(imgSrc);
        return <img key=burgerItem.id src=imgSrc />;
      )
    </BurgerDiv>
  );
;

export default BurgerComponent;

道具如下图所示

  "burger":[
    
      "type":"top",
      "img":"burgerTop",
      "value":1,
      "id":"sss2",
      "addable":false
    ,
    
      "type":"bottom",
      "img":"burgerBottom",
      "value":1,
      "id":"aaa7",
      "addable":false
    
  ]

但图像路径不是从导入中获取的。

不知道我做错了什么。

请帮忙。

【参考方案1】：

img 的源属性应该是 URL 或 base64 字符串。您的 burger 道具没有这样的源属性。

我注意到您正在从 assets 文件夹导入 burgerTop 和 burgerBottom。也许你可以像这样使用这些图像：

props.burger.map(burgerItem => 
        const imgSrc = burgerItem.img === "burgerTop" ? burgerTop : burgerBottom ;
        return <img key=burgerItem.id src=imgSrc />;
      )

【讨论】：

但是数组中的图像会多一些，我会将其添加到顶部，而不是此解决方案的工作原理。

尝试将图像的 URL 存储在您的道具中。