#React import images from data.js for airbnb app?

9 messages · Page 1 of 1 (latest)

cerulean mason
#

Hi I'm using VSC with the React create-react-app, around half way through the first tutorial on the airbnb app.

I have tried various techniques, even dragging the images folder into the public folder, and still no activity pictures show.
Any ideas?

My app.js file imports from data.js:

import Card from "./components/Card";
import data from "./data";

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}
      />
    )
  })```

Then my data.js file:
```react
     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-zeferes.png",
        stats: {
            rating: 5.0,
            reviewCount: 6
        },
        location: "Online",
        openSpots: 0,
    }```
karmic yoke
#

What do you do in Card to load the image? it seems as though you are properly passing down the path as a string, accessible through props.img, but you need to import the image to use it in react (this is not the case in the scrim editor, check one of Bob's early lessons to see how he explains it)

cerulean mason
#

Well damn! Thank you! Basically pointed it right out to me! Though rather than using props to import the images, I've moved the images folder in the src folder, and just importing them into data.js. Then under coverImg: "katie-zeferes.png", I replaced the line with coverImg: katie after importing her picture from 'katie'

# 
import katie from "./images/katie-zaferes.png";
import wedding from "./images/wedding-photography.png";
import bike from "./images/mountain-bike.png";


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,
        stats: {
            rating: 5.0,
            reviewCount: 6
        },
        location: "Online",
        openSpots: 0,
karmic yoke
#

great! so glad I could help! I'm not sure what best practice is, but I think your solution would potentially cause issues if you were using something like an api, but i'm really not sure!

cerulean mason
#

Completely new to this, first time through the tutorial too. I've been trying everything for the past hour or two, felt like I'd hit a brick wall in the lesson! Got it working for now thanks to your pointers, so if I encounter issues in the future, I will tackle them when they arrive 😛

karmic yoke
#

youre welcome! im pretty new too, but stay strong, it gets easier!

#

also, id appreciate if you could purple heart react my message, theres a karma system that can win you a free hoodie if you help out enough

cerulean mason
#

Sure thing!