React display image in component

user_3451339 0
Viewed 1478

I'm new to React, sorry if this is too basic.

I'm trying do display an image on a component 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>
);

I'm trying to do that from within render() in another component, Field.jsx:

import "./Position.css";
import { Position } from "./Position";

...

getPositionData = val => {
    this.setState({ positions: this.state.positions};
  }

render() {
return (
 <div className="app">
    <div className="calc-wrapper">
      <Input input={this.state.input} />
      <div className="row">
        <Position 
            src='https:my-url.png' 
            handleClick={this.getPositionData}>
        </Position>
      </div>
      </div>
    </div>
  </div>
);

}

Clicking on component works, but no image is displayed. What am I missing?

reactjs javascript
3 Answers

I might be missing something here, but I see no <img> tag in your code.

A nice way to use images in react, at least if the image is part of the UI, is to import it first and then use it like so:

    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;

If the image is not part of your app and you have lots of (large) images, it might be better to offload it onto a CDN and use it from there.

If you want to pass the image src path via props, you still need the image tag and just use props.src as the img src, something like so:

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

You're missing the <img> element.

You probably want to do:

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

The <img> element is passed as a child to the Position component.

user_2216120

add the elemnt html in the postion like this shape

     <Position handleClick={this.getPositionData}>

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