CODEWITHSUNDEEP
javascriptreactjs
Oli Ullah
Oli Ullah

Reputation: 161

Image is not rendering in the DOM while passing as props in the App.js file?

I am passing the image name as props in the instance of the Card component in App.js. Then I am receiving it from the Card component and render it to the DOM. But my image is not showing in the DOM. What could be the reason?

This is my App.js

import React from "react";
import "./style.css";
import Navbar from "./components/Navbar";
import Hero from "./components/Hero";
import Card from "./components/Card";
import "./images/image12.png";
import "./images/Star1.png";
function App() {
  return (
    <div className="App">
      <Navbar />
      <Hero />
      <Card
        img="image12.png"
        star="Star1.png"
        obtainedRating={5.0}
        TotalRating="6-USA"
        briefText="Life lessons with Katie Zaferes"
        price="$136"
        person="/person"
      />
    </div>
  );
}

export default App;

Here is my Card component

import React from "react";
import "../style.css";
import "../images/image12.png";
import "../images/Star1.png";
export default function Card(props) {
  console.log(props);
  return (
    <div className="card--section">
      <img src={`../images/${props.img}`} className="card--image" alt="Katie" />

      <div className="rating">
        <img
          src={`../images/${props.star}`}
          className="star--image"
          alt="star"
        />
        <small>
          {props.obtainedRating} <span>{props.totalRating}</span>
        </small>
      </div>
      <p className="brief-text">{props.briefText}</p>
      <p className="price">
        <strong>{props.price}</strong>
        {props.person}
      </p>
    </div>
  );
}

This is my Folder structure

src -components -Card.js -images -image12.png -Star1.png -App.js -index.js

Upvotes: 2

Views: 884

Answers (4)

Edison Trutwein
Edison Trutwein

Reputation: 775

The image path can retrieved by using the import statement

like below

import "./styles.css";
import clouds from "./Images/clouds.jpeg";
import CardImage from "./CardImage";

export default function App() {
  console.log("cloud path", clouds);
  return (
    <div className="App">
      <CardImage path={clouds} alt="clouds" />
    </div>
  );
}

enter image description here

Upvotes: 1

Oli Ullah
Oli Ullah

Reputation: 161

I have found the solution.I simply imported

import cardImage from "./images/image12.png"
import star from "./images/Star1.png"

And used them in App.js

<Card img={cardImage} star={star}/>

Upvotes: 0

Yash Sharma
Yash Sharma

Reputation: 232

Import images like:

import img12 from '../images/image12.png'
import star1 from './images/Star1.png'

Upvotes: 2

Gulshan Aggarwal
Gulshan Aggarwal

Reputation: 999

This is not working because you need to import an image like this and then put imageName as the value of src attribute. You can give any name you like.

import imageName from "../images/image12.png";

src={imageName}

Upvotes: 2

Related Questions