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()" ponents, and the props solution is better.

import React from 'react';

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

export default ProjectCard;

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

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

export default App;

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

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

I used create-react-app.

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()" ponents, and the props solution is better.

import React from 'react';

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

export default ProjectCard;

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

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

export default App;

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

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

I used create-react-app.

• javascript
• reactjs

• It's probably because you're using relative paths, and the ponent 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 Commented Jun 17, 2021 at 7:26
• 1 Ok! I'm gonna try to use absolute path, and then I'll give the feedback! – Eduardo Dorneles Commented Jun 17, 2021 at 7:28
• 1 You can import that image into parent ponent, in your case App like this import Diamond from '../../images/image.jpg'; and use it <ProjectCard image={Diamond} /> – mohit jain Commented Jun 17, 2021 at 7:35
• Yeah, with this, works fine. But, how I said, I need lots of "ProjectCard()" ponents, and the props solution is better. – Eduardo Dorneles Commented Jun 17, 2021 at 7:43
• @mohitjain is correct. Import the images and pass them as a prop to ProjectCard ponent. The alternative is to move the images into the public folder and then specify the paths from there. – Drew Reese Commented Jun 17, 2021 at 7:44

1 Answer 1

PUBLIC FOLDER

Considering you have a public folder structured as followed,

- public
   |- images
       |- image.jpg

You can structure your ponents 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
   |- ponents
       |- ProjectCard.jsx
   |- images
       |- image.jpg
   App.jsx

You can structure your ponents as such:

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

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

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