मैं एक वेब-ऐप बनाने के लिए प्रतिक्रिया का उपयोग कर रहा हूं जिसे स्थिर होना है इसलिए कोई एपीआई कॉल नहीं है और मुझे कुछ डेटा क्लाइंट-साइड स्टोर करने की आवश्यकता है (मैं वर्तमान में केवल एक JSON फ़ाइल का उपयोग कर रहा हूं क्योंकि यह वास्तव में बड़ा नहीं है) लेकिन मैं ' मैं छवियों को पास करने के लिए संघर्ष कर रहा हूं, मैं संदर्भों को JSON फ़ाइल में स्ट्रिंग के रूप में संग्रहीत कर रहा हूं और उन्हें प्रोप में भेज रहा हूं लेकिन मुझे सभी प्रकार की त्रुटियां मिल रही हैं। क्या ऐसा करने का कोई बेहतर या अधिक व्यावहारिक तरीका है?

कोड (मैंने JSON संरचना की नकल करने के लिए एक चर जोड़ा है):

const HomePage = () => {
   let projectInfo: ProjectInfo = {
      title: "Project",
      description:
         "A progressive web app.",
      imgURL: "./TODO", //<- HERE
      mainColour: "#323232",
      secondaryColour: "#464646",
   };

   return (
      <div id="carousel-container">
         <Carousel labels={["1"]}>
            <ProjectPanel info={projectInfo} />
         </Carousel>
      </div>
   );
};

export default HomePage;

interface IProjectPanelProps {
   info: ProjectInfo;
}

const ProjectPanel = (props: IProjectPanelProps) => {
   return (
      <div className="project-panel">
         <h2>{props.info.title}</h2>
         <p>{props.info.description}</p>
         <img src={/* ?? */} alt=""></img>
      </div>
   );
};
0
Reillo 22 मार्च 2021, 00:19

3 जवाब

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

क्या यह संदर्भ के बजाय src नहीं होना चाहिए?

-2
slaid3r 22 मार्च 2021, 00:31

आप अपनी छवि को अपने होम पेज में एक वैरिएबल के रूप में आयात कर सकते हैं और उस वैरिएबल को अपने चाइल्ड कंपोनेंट में पास कर सकते हैं।

import myImage from 'your_image_path';

const HomePage = () => {
   let projectInfo: ProjectInfo = {
      title: "Project",
      description:
         "A progressive web app.",
      imgURL: myImage
      mainColour: "#323232",
      secondaryColour: "#464646",
   };

   return (
      <div id="carousel-container">
         <Carousel labels={["1"]}>
            <ProjectPanel info={projectInfo} />
         </Carousel>
      </div>
   );
};

export default HomePage;

interface IProjectPanelProps {
   info: ProjectInfo;
}

const ProjectPanel = (props: IProjectPanelProps) => {
   return (
      <div className="project-panel">
         <h2>{props.info.title}</h2>
         <p>{props.info.description}</p>
         <img src={info.imgURL} alt=""></img>
      </div>
   );
};
0
Yadab 22 मार्च 2021, 04:35