Reactjs: why img's src cannot be passed to props?

Question

I am passing a prop (which contains a string link) into a component. This props is then used inside the src property of <img /> but this causes a broken image instead. What is the correct way of doing this without using the import...from... method in the beginning of my component. The code below shows other alternatives that i tried which dont work.

class Entry extends React.Component {

    
    render() {

        const link = '../../images/company-logo.png';
        const image = require(link);                                //error: cannot find module 
        const imagee = require('../../images/company-logo.png');    //works fine, but not ideal
                     
        return (
        <div className="entry">
           <img src={this.props.imageLink}/>                        //results in a broken image
           <img src={link}/>                                        //results in a broken image
           <img src={imagee}/>                                      //works fine
        </div>
        );
    }
}

This really depends on the paths you're serving images from and your build tool. Where is this file relative to your images and are you using create-react-app or something else? — Nick McCurdy, May 23 '20 at 16:01
you should use image source path relevant to your index.html file. I mean path should describe the way from your index.html to your image file. — acbay, May 23 '20 at 16:03
@NickMcCurdy Yes I am using create-react-app. And the link is where the image is relative to the file. I have my index.js on the same level as the 'images' directory. the index.html is in the public directory. below is how it looks like: public (index.html) , src( images, components, index.js) — kabison33, May 23 '20 at 16:17
i don't think it's wrong just try this : require('../../images/company-logo.png').default; — Singh, Jun 09 '21 at 10:03

score 2 · Answer 1 · answered May 23 '20 at 16:05

You need to import the image first and then either use it directly as value of src attribute on img element or pass it to some other component as a prop

import myImg from '../../images/company-logo.png';

now either use myImg directly as a value of src attribute

<img src={myImg}/>

or pass it down as a prop

<div className="entry">
   <SomeComponent img={myImg} />                                               
</div>

score 0 · Answer 2 · answered May 23 '20 at 16:36

Actually you can pass image src via props but some where you have to import it. You have to do that because React projects mostly use Webpack to build the code and the images also be built with JS code.

I know there are 2 options which might help you solve this problem.

Import image from Parent Component and pass it to the child one:

import Image from '../images/image-01.png';

function ParentComponent {
    return <ChildComponent img={Image} />;
}

function ChildComponent(props) {
    return <img src={props.img} />;
}

Import all images inside a folder and use it as an image dictionary by using require.context:

function importAll(r) {
  return r.keys().map(r);
}

const images = importAll(require.context('../images', false, /\.(png|jpe?g|svg)$/));

function ChildComponent(props) {
    const link = 'image-01.png'; // or link = props.parentLink;
    return <img src={images[link]} />;
}

You could find more information about option 2 in this answer.

Hope it could help you solve your problem.

Reactjs: why img's src cannot be passed to props?

2 Answers2