CODEWITHSUNDEEP
javascriptreactjsreact-props
alienhana
alienhana

Reputation: 43

How do i pass images property from state object as props

I need to pass an image from a state object to the card component that i made but it's not showing up at all what am i doing wrong here?

parent class:

import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import "@fortawesome/fontawesome-free/css/all.min.css";
import "./portfolio.css";
import { DarkStarDiv } from "../StarDiv/StarDiv";
import cabin from "./cabin.png";
import PortfolioCard from "../PortfolioCard/PortfolioCard";


export default class Portfolio extends Component {
  state = {
    card: { id: "logCabin", name: "cabin", img: {cabin} , label: "Log Cabin" },
  };
  render() {
    return (
      <>
        <div className="container portfolio">
          <div className="headding py-2">
            <h2>Portfolio</h2>
            <DarkStarDiv />
          </div>
          <div className="row">
            <PortfolioCard crd={this.state.card} />
          </div>
        </div>
</>
  );
 }
}

child class that im passing the image to:

import React, { Component } from "react";
export default class PortfolioCard extends Component {
  render() {
    // console.log(this.props.crd);
    let {id , name, img, label} = this.props.crd;
    return (
        <div className="col-md-4 col-sm-6">
        <div className="port-card">
          <img src={img} className="w-100" alt="cabin" />
          <div className="port-card-layer">
            <i className="fa-solid fa-plus text-light"></i>
          </div>
        </div>
      </div>
    );
  }
}

Upvotes: 0

Views: 100

Answers (1)

Tarun Kumar Sao
Tarun Kumar Sao

Reputation: 134

I have tried passing an image in a similar way. It was not working. You will have to convert your image in the form of a URL and then pass it as a prop so that the src attribute of img tag receives a URL. You can use Postimages website to host any image in your local system and get a url for it to use anywhere. Copy the direct link to your img tag's src attribute and use it.

Upvotes: 1

Related Questions