CODEWITHSUNDEEP
javascriptreactjs
8-Bit Borges
8-Bit Borges

Reputation: 10033

React display image in component

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?

Upvotes: 3

Views: 2200

Answers (3)

Kenny Meyer
Kenny Meyer

Reputation: 8027

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.

Upvotes: 2

Mohammed Al-Reai
Mohammed Al-Reai

Reputation: 2816

add the elemnt html in the postion like this shape

     <Position handleClick={this.getPositionData}>

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

Upvotes: 0

Ozone
Ozone

Reputation: 1353

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">

Upvotes: 2

Related Questions