Set image src with props

Question

I'm getting an error when I try to set the src of an image using props.

I searched a lot for a solution to this problem, but all of them, brings me to the require(), and then set the props inside it. But, it's not working to me.

The image path it's correct, because when I use the import method to set the src of an image, it works. But I need lots of "ProjectCard()" components, and the props solution is better.

Component that contains the image:

import React from 'react';

const ProjectCard = (props) => (
    <div>
        <img src={ require(props.image).default } />
    </div>
);

export default ProjectCard;

Component that it's importing the ProjectCard():

import React from 'react';    
import ProjectCard from './components/ProjectCard/';

const App = () => (
    <ProjectCard image="../../images/image.jpg" />
);

export default App;

I've tried this solution too, but didn't go well (using single quotes):

<ProjectCard image="'../../images/image.jpg'" />

Both tentatives, I get the same error:

Error: Cannot find module '../../assets/image.jpg'

I used create-react-app.

It's probably because you're using relative paths, and the component that you're passing to isn't in the same hierarchy (it's too shallow or too deep). Use absolute paths to alleviate that. ;) — Joel Hager, Jun 17 '21 at 07:26
Ok! I'm gonna try to use absolute path, and then I'll give the feedback! — dududornelees, Jun 17 '21 at 07:28
You can import that image into parent component, in your case App like this import Diamond from '../../images/image.jpg'; and use it — mohit jain, Jun 17 '21 at 07:35
Yeah, with this, works fine. But, how I said, I need lots of "ProjectCard()" components, and the props solution is better. — dududornelees, Jun 17 '21 at 07:43
@mohitjain is correct. Import the images and pass them as a prop to `ProjectCard` component. The alternative is to move the images into the `public` folder and then specify the paths from there. — Drew Reese, Jun 17 '21 at 07:44

ale917k · Accepted Answer · 2021-06-17T07:55:46.987

6

PUBLIC FOLDER

Considering you have a public folder structured as followed,

- public
   |- images
       |- image.jpg

You can structure your components as such:

const App = () => (
    <ProjectCard image="image.jpg" />
);

const ProjectCard = (props) => (
    <div>
        <img src={`images/${props.image}`} />
    </div>
);

Where your image path will simply be absolute to the public folder, as images/image.jpg

SRC FOLDER

On the other hand, if you have your images inside your src folder as followed,

- src
   |- components
       |- ProjectCard.jsx
   |- images
       |- image.jpg
   App.jsx

You can structure your components as such:

import image from "./images/image.jpg";

const App = () => (
    <ProjectCard image={image} />
);

const ProjectCard = (props) => (
    <div>
        <img src={props.image} />
    </div>
);

edited Jun 17 '21 at 07:55

answered Jun 17 '21 at 07:45

ale917k

1,494
7
18
37

I tried to pass all images to the PUBLIC FOLDER, but it brings me another error, but this time, in my `style.css` which is: `Relative imports outside of src/ are not supported`. Because I'm trying to set a `background-image`. – dududornelees Jun 17 '21 at 19:35
And about the images in the SRC FOLDER, importing all of them. I have lots of images, and I don't think that importing all of them is a "good practice". Or it is? – dududornelees Jun 17 '21 at 19:39
1

Regarding your first question, if you see above you can notice I used absolute path, not relative - Regarding your second, when you create new `create-react-app` projects, you can find the spinning logo to be on the src, so it's defo not a bad practice to have them there - Read more about the difference between storing images in public vs src here: https://stackoverflow.com/a/45300180/11895568 – ale917k Jun 17 '21 at 20:10
1

Ok, so I'm gonna import the images to use as a prop. Thank you so much! :D – dududornelees Jun 17 '21 at 20:21

Set image src with props

1 Answers1

PUBLIC FOLDER

SRC FOLDER