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

user_13118218 0
Viewed 175

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

reactjs javascript
4 Answers

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}
user_133473020

Import images like:

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

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

user_41197320

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}/>
user_131182180
Related