Passing an image as Props

[hushed remnant]

Hi,

I'm working on the AirBnB clone section, following along in my own IDE. I'm currently at the part where we are learning about Props, passing the cat images from App.js to Contact.js.

The only way I found to get this to work was to import the images into App.js at the top of the file, then pass that (keyword/variable/object?) as props to Contacts.js

e.g.

import React from "react"
import cat1 from "./images/cat1.png"

function App() {
    return (
        <div className="contacts">
        
            <Contact 
            image={cat1}
            name="Cat 1"
            />
        </div>
    )
}

Is this the correct way to do it? So every time I want to use an image in React like this, I need to first import it, then pass that as props? Is this how you would do it if you were grabbing an image from a URL, as well?

Thanks

Lesson for reference: https://scrimba.com/learn/learnreact/props-part-4-receiving-props-in-a-component-co88c4bfa84d99b466b78e914

[cerulean raft]

Yes, if you are a beginner, this is the correct method; however, there is a trick or alternative method in which you place your img folder outside of src, and then you can only give the path in src as you normally do.

When I need to use multiple images, I use this technique.

[hushed remnant]

So that would be a separate Images.js file you can just import in your App.js in just one line of code?

I saw a 'workaround' that placed the images folder in a Public folder, which was meant to mean I could access the images easily like

"images/image1.png"
"images/image2.png"

But that didn't seem to work for me when I tried it. Not sure if that's also what you're referencing

But if that's just a separate Images.js file that you import, that looks like it solves a lot of the clutter I imagined the way I'm working would cause

[cerulean raft]

Yup, seperate Images.js

If you don't want to import each image seperately and also don't want to create exta file to store images. Then simple trick would be to place your image folder where is index.html and then simply give your image path in src like you usually do.

[hushed remnant]

Currently I have my index.html in the Public folder, I think this solution is similar workaround I mentioned above. (So placing my image folder in the Public folder and referencing it as above, but this didn't seem to work for me).

I like the sound of what you've mentioned with an Images.js, I'll probably try to implement it into the next Solo Project. Thanks for your help!

[cerulean raft]

https://github.com/Just9krish/React-Practicing/tree/main/AirBnb-Clone

See this it works

[hushed remnant]

Hi @cerulean raft , I managed to get it working with my crude method above, but for some reason in my latest project (Travel Blog) it just doesn't want to work.

I tried the images.js method you mentioned, it's working but I thought I'd check if it's what you meant.

I assigned each image in images.js an ID (from 0-3), like it looks like you have above. I also assigned a corresponding ID to each Blog Post in my data.js file.

I then imported images.js into my Component, where I rendered the correct image for each post using src={images[props.id].image}.

Is that anything like how you do it?