If you have a new account but are having problems posting or verifying your account, please email us on [email protected] for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact [email protected]

props.img not displaying

  • 11-06-2022 1:51pm
    Moderators, Computer Games Moderators, Social & Fun Moderators Posts: 79,059 Mod ✭✭✭✭

    Learning about props in react atm, I'm having an issue whereby when I try to pass an image as a prop its won't display properly, see the screenshot below

    Here's my code in App.js

    import React from "react";
    import Navbar from "./components/Navbar"
    import Hero from "./components/Hero"
    import Card from "./components/Card"
    export default function App(){
                <Navbar />
                <Hero />
                    title="Life lessons from Katie Zaferes"

    and where I'm trying to pass the image into

    import React from "react"
    import star from "../images/star.png"
    export default function Card(props){
            <div className="div1">
                <img src={`../images/${props.img}`}   className="katie1"/>
                <div className="card-stats">
                    <img src={star} className="card--star" />
                    <span className="grey">({props.reviewcount}) </span>
                    <span className="grey">{}</span>
                <p>From ${props.price} / person</p>

    Any ideas? I've tried moving the images folder to the public folder but react doesn't seem to like that as I get an error message "images can't be outside of the src folder"


  • Registered Users Posts: 403 ✭✭counterpointaud

    This is likely more an issue with whatever bundler you are using, and how it's configured, rather than React. If you post a link to a GitHub repo or something, someone will likely be able to help you. Hard to know what the issue is otherwise.

  • Registered Users Posts: 17,336 ✭✭✭✭Mr. CooL ICE

    Have you tried doing the following in Card?

    <img src={props.img}   className="katie1"/>

    Looking at the way you've pasted it above, it looks like the image URL will resolve to be:


    Failing that, maybe change the prop to just be the filename as opposed to the relative filepath. Have you been able to check through the browser debugger/inspector to see what the image URL is resolving to be?