Question

我是React的新手，如果这太基础了，就对不起。

我正在尝试在组件c = 1000*a + b上显示图像：

Position.jsx

我正在尝试从另一个组件import React from "react"; import "./Position.css"; const isOperator = val => { return !isNaN(val) || val === "." || val === "="; }; export const Position = props => ( <div className={`button-wrapper ${ isOperator(props.children) ? null : "operator" }`} onClick={() => props.handleClick(props.children)} > {props.children} </div> );的{{1}}内部进行操作：

render()

}

单击组件有效，但是没有图像显示。我想念什么？

Answer 1

我可能在这里丢失了一些东西，但是您的代码中没有<img>标签。

至少在图像是用户界面的一部分的情况下，使用图像进行反应的一种好方法是先将其导入，然后像这样使用它：

    import React from "react";
    import myImage from "../images/myimage.png";

    const ExampleComponent = (props) => {

      return (
        <div className="imageDiv">
          <img src={myImage} alt="some image" width="150" height="100" />
        </div>
      );

    };

    export default ExampleComponent;

如果该图像不属于您的应用程序，并且有很多（大）图像，则最好将其卸载到CDN上并从那里使用。

如果要通过props传递image src路径，则仍然需要image标签，只需将props.src用作img src，就像这样：

<img src={props.src} alt="description">

Answer 2

您缺少<img>元素。

您可能想做：

        <Position handleClick={this.getPositionData}>
            <img src='https://my-url.png' alt='image' />
        </Position>

<img>元素作为子元素传递给Position组件。

Answer 3

在这种形状的位置添加html

     <Position handleClick={this.getPositionData}>

              <img src="path" alt="some image" />
</Position>

反应组件中的显示图像

3 个答案: