图像未加载到反应中答案

【问题标题】：Image is not loading into react图像未加载到反应中
【发布时间】：2021-06-18 08:36:53
【问题描述】：

我想使用来自其父母的 react 道具加载图像，但我无法使用道具加载图像。该页面为空白，其他字段（如图像标题和 div 中的按钮）可见，但图像为空。我正在使用 evergreen-ui 进行样式设置。父类：

class Trending extends Component {
constructor() {
  super();
 this.state = {
  images: [
    {
      id: "1",
      img_name: "liverpool-1",
      heading: "Nike Football Impulse Pack",
    },
    {
      id: "1",
      img_name: "shoe-1",
      heading: "Nike Football Impulse Pack",
    },
  ],
};
}

render() {
 return (
   <Pane>
     <Pane>
       <Heading
        size={1400}
        color="#111"
        marginLeft={20}
        marginRight={20}
        paddingTop={10}
        paddingBottom={20}
        fontWeight={500}
        fontFamily="Helvetica Neue|Helvetica|Arial|sans-serif">
        Trending
       </Heading>
       <Pane
        display="flex"
        position="relative"
        marginLeft={20}
        marginRight={20}>
         {this.state.images.map((image) => (
           <ImageButton
             id={image.id}
             img_name={image.img_name}
             heading={image.heading}
           />
         ))}
       </Pane>
     </Pane>
   </Pane>
  );
  }
}

导出默认趋势；

儿童班：

class ImageButton extends Component {
constructor(props) {
super(props);
this.state = {
  images: [
    {
      img_name: "",
      heading: "",
    },
  ],
  };
}

   render() {
     return (
      <Pane className="img-container" marginRight={5}>
      <img
       src={require("../assets/images/" + this.props.img_name + ".png")}
       alt=""
      />
      <Pane className="btn-txt">
      <Heading size={600} className="txt">
        {this.props.heading}
      </Heading>
      <Button className="btn"> Shop </Button>
    </Pane>
  </Pane>
);

} }

导出默认的ImageButton；

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

create-react-app 网站示例

import React from 'react';
import logo from './logo.png';

function Header() {
 // Import result is the URL of your image
return <img src={logo} alt="Logo" />;
}

export default Header;

如果您的图像中有条件，请使用字符串插值。

<img src={`../assets/images/`${this.props.img_name}.png`)}/>

还要确保检查图像的相对路径。

【讨论】：