Props.img not displaying

[sephmon]

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(){
return(

    <div>
        <Navbar />
        <Hero />
        <Card
            img="./images/katie.png"
            rating={5.0}
            reviewcount={6}
            country="usa"
            title="Life lessons from Katie Zaferes"
            price={138}
        />

    </div>
)

}

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){

return(
    <div className="div1">
        <img src={`../images/${props.img}`}   className="katie1"/>
        <div className="card-stats">
            <img src={star} className="card--star" />
            <span>{props.rating}</span>
            <span className="grey">({props.reviewcount}) </span>
            <span className="grey">{props.country}</span>
        </div>
        <p>{props.title}</p>
        <p>From ${props.price} / person</p>
    </div>
)

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

[James_Hibbard]

Hi,

@sephmon

I’ve tried moving the images folder to the public folder

That would have been my initial suggestion.

Can you make a simple demo reproducing your error and stick it on GitHub (so that I can clone the repo and reproduce your problem on my PC).

If you do that, I don’t mind taking a look.

[sephmon]

I will do that thanks mate.

[m3g4p0p]

Hi @sephmon, what you might do if the image path is not dynamic (and if you’re using create-react-app) is import the image like a JS module, and pass that to the component:

import katie from './images/katie.png'

export default function App () {
  return (  
    <div>
      <Navbar />
      <Hero />
      <Card
        img={katie}
        rating={5.0}
        reviewcount={6}
        country="usa"
        title="Life lessons from Katie Zaferes"
        price={138}
      />
    </div>
  )
}

This way, the image will get copied to the dist folder with your application with the path resolved accordingly, or inlined as a data URI depending on its size… see here for details:

Adding Images, Fonts, and Files | Create React App

PS: An immediate issue with your code is that you’re passing ./images/katie.png to the Card component, and then setting ../images/${props.img} as the image source, which would result in ../images/./images/katie.png.

Edit: Added missing curly braces.

[sephmon]

Thanks @m3g4p0p for your reply, I tried that but it didn’t work unfortunately.

[sephmon]

@James_Hibbard just trying to re-create the error but I can’t get it now for some reason but the error something like this

 You attempted to import ../../public/images/logo/WC-BlackonWhite.jpg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.

The error message I’m getting now is

Compiled with problems:X

ERROR in ./src/components/Navbar.js 5:0-55

Module not found: Error: Can't resolve '..public/images/airbblogo.png' in 'C:\Users\kevin\OneDrive\Desktop\React\my-app7\src\components'

I’m just trying to get it up to github there.

[m3g4p0p]

@sephmon

I tried that but it didn’t work unfortunately

My bad, I just forgot the curly braces – it should be

<Card 
  img={katie}  
  // ...
/>

[sephmon]

@m3g4p0p

import katie from './images/katie.png'

@m3g4p0p I had actually tried it with the {} around katie but that didn’t work either I’m afraid, thanks anyway.

[sephmon]

@James_Hibbard here is the gitbhub repo

https://github.com/SephMon/reactapp.git

[m3g4p0p]

@sephmon

I had actually tried it with the {} around katie but that didn’t work either

@sephmon

here is the gitbhub repo

The image source should just be props.img then, not ..public/images/${props.img}… it seems like you’re mixing up the two different approaches here. Also, ..public doesn’t look quite right – it’s not relative to the source folder, and if it was it would be missing a slash. Have a look at the docs on how to access the public folder correctly:

Using the Public Folder | Create React App

[James_Hibbard]

@sephmon

@James_Hibbard here is the gitbhub repo

Thanks.

Move the images folder back in to the src folder, so that the src folder looks like this:

.
├── App.js
├── components
│   ├── Card.js
│   ├── Hero.js
│   ├── Navbar.js
│   └── styles.css
├── images
│   ├── airbblogo.png
│   ├── katie.png
│   ├── photogrid.png
│   └── star.png
└── index.js

Then, in in App.js:

import React from 'react';
import Navbar from './components/Navbar';
import Hero from './components/Hero';
import Card from './components/Card';
import katie from './images/katie.jpg';

export default function App() {
  return (
    <div>
      <Navbar />
      <Hero />
      <Card
        img={katie}
        rating={5.0}
        reviewcount={6}
        country="usa"
        title="Life lessons from Katie Zaferes"
        price={138}
      />
    </div>
  );
}

And in Card.js:

import React from 'react';
import star from "../images/star.png"

export default function Card(props) {
  return (
    <div className="div1">
      <img src={props.img} className="katie1" alt="Katie Zaferes" />
      <div className="card-stats">
        <span>{props.rating}</span>
        <span className="grey">({props.reviewcount}) </span>
        <span className="grey">{props.country}</span>
      </div>
      <p>{props.title}</p>
      <p>From ${props.price} / person</p>
    </div>
  );
}

That works as expected for me.

I also did a little reading into the proper place to add images when using CRA. This question on Stack Overflow is enlightening. From the accepted answer:

Adding images in the public folder and the src folder both are acceptable methods, however, importing images into your component has the benefit that your assets will be handled by the build system, and will receive hashes which improves caching/performance. You’ll also have the added benefit that it will throw an error if the file is moved/renamed/deleted.

[sephmon]

That worked thanks so much @James_Hibbard

I’ve run into another problem now, I want to read the data from a data.js file,map over it, there is two other card components but the images aren’t showing again, the tutor for the tutorial I’m following which is on scrimba said to put them in the public folder but it I get back an error message

Module not found: Error: You attempted to import ../../public/images/photogrid.png which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.

export default [
    {
        id: 1,
        title: "Life Lessons with Katie Zaferes",
        description: "I will share with you what I call \"Positively Impactful Moments of Disappointment.\" Throughout my career, many of my highest moments only came after setbacks and losses. But learning from those difficult moments is what gave me the ability to rise above them and reach my goals.",
        price: 136,
        coverImg: "katie.png",
        stats: {
            rating: 5.0,
            reviewCount: 6
        },
        location: "Online",
        openSpots: 0,
    },
    {
        id: 2,
        title: "Learn Wedding Photography",
        description: "Interested in becoming a wedding photographer? For beginner and experienced photographers alike, join us in learning techniques required to leave the happy couple with memories that'll last a lifetime.",
        price: 125,
        coverImg: "wedding-photography.png",
        stats: {
            rating: 5.0,
            reviewCount: 30
        },
        location: "Online",
        openSpots: 27,
    },
    {
        id: 3,
        title: "Group Mountain Biking",
        description: "Experience the beautiful Norwegian landscape and meet new friends all while conquering rugged terrain on your mountain bike. (Bike provided!)",
        price: 50,
        coverImg: "mountain-bike.png",
        stats: {
            rating: 4.8,
            reviewCount: 2
        },
        location: "Norway",
        openSpots: 3,
    }

]

import React from "react";
import Navbar from './components/Navbar';
import Hero from './components/Hero';
import Card from './components/Card';

import data from "./data"
export default function App(){
    const cards = data.map(item => {
        return(
            <Card
                img={item.coverImg}
                rating = {item.stats.rating}
                reviewcount={item.stats.reviewCount}
                location={item.location}
                title={item.title}
                price={item.price}
            />
        )
    })
    return(
        <div>
            <Navbar />
            <Hero />
            {cards}

        </div>
    )
}

the images aren’t displaying again, I’ve tried importing them into data.js file but they don’t show up. Any ideas?

[James_Hibbard]

Place the three images you are using in the Card component in the public directory. Keep the other images where they are (i.e. inside src/images) and things will work as desired.

FWIW, I would advise you to read the link that m3g4p0p posted above. Also search for how to use the public folder in Create React App and make sure you understand how it is used before moving on.