मैं प्रतिक्रिया के लिए नया हूँ, क्षमा करें यदि यह बहुत बुनियादी है।

मैं एक घटक 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>
);

मैं इसे दूसरे घटक में render() के भीतर से करने की कोशिश कर रहा हूं, 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>
);

}


घटक कार्यों पर क्लिक करना, लेकिन कोई छवि प्रदर्शित नहीं होती है। मुझे किसकी याद आ रही है?

3
8-Bit Borges 17 सितंबर 2020, 23:39

3 जवाब

सबसे बढ़िया उत्तर

आप <img> तत्व खो रहे हैं।

आप शायद करना चाहते हैं:

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

<img> तत्व को एक बच्चे के रूप में Position घटक में पास किया जाता है।

1
Kenny Meyer 20 सितंबर 2020, 21:55

मुझे यहां कुछ याद आ रहा है, लेकिन मुझे आपके कोड में कोई <img> टैग नहीं दिख रहा है।

प्रतिक्रिया में छवियों का उपयोग करने का एक अच्छा तरीका, कम से कम अगर छवि UI का हिस्सा है, तो इसे पहले आयात करना और फिर इसका उपयोग करना है:

    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;

यदि छवि आपके ऐप का हिस्सा नहीं है और आपके पास बहुत सारी (बड़ी) छवियां हैं, तो इसे सीडीएन पर लोड करना और वहां से इसका उपयोग करना बेहतर हो सकता है।

यदि आप प्रोप के माध्यम से छवि स्रोत पथ को पारित करना चाहते हैं, तो आपको अभी भी छवि टैग की आवश्यकता है और बस props.src को img src के रूप में उपयोग करें, ऐसा कुछ:

<img src={props.src} alt="description">
1
Ozone 17 सितंबर 2020, 23:49

इस आकृति की तरह elemnt html को पोस्ट में जोड़ें

     <Position handleClick={this.getPositionData}>

              <img src="path" alt="some image" />
</Position>
0
Mohammed_Alreai 18 सितंबर 2020, 00:27