I have a react component which has a prop passed with the name of an Import which contains an image path.

In this case the prop value is Ico1.

I need to pass the prop in the img src like so:

code below:

import React from 'react';
import Ico1 from '../icon1.png';


 const MyComp = (props) => <div>

           <img src={props.chosenicon} alt="" />

         </div> 
     }

 </div>

 export default MyComp

My problem is that when I add this:

<img src={Ico1} alt="" />

...it shows the image but if I do this:

<img src={props.chosenicon} alt="" />

...it shows no image, even though the value of props.chosenicon is 'Ico1' and typeof says they are both strings.

How can I get this to work so it shows the image?

I have a react component which has a prop passed with the name of an Import which contains an image path.

In this case the prop value is Ico1.

I need to pass the prop in the img src like so:

code below:

import React from 'react';
import Ico1 from '../icon1.png';


 const MyComp = (props) => <div>

           <img src={props.chosenicon} alt="" />

         </div> 
     }

 </div>

 export default MyComp

My problem is that when I add this:

<img src={Ico1} alt="" />

...it shows the image but if I do this:

<img src={props.chosenicon} alt="" />

...it shows no image, even though the value of props.chosenicon is 'Ico1' and typeof says they are both strings.

How can I get this to work so it shows the image?

• javascript
• reactjs

6 Answers 6

Two components - App.js and Icon.js and an image called icon.jpg

Here is your App.js

import React from 'react';
import icon from './icon.jpg';
import Icon from './Icon';

const App = () => (
  <div>
    <h1>This is the app</h1>
    <Icon icon={icon} />
  </div>
);

export default App;

And here is your Icon.js

import React from 'react';

const Icon = props => (
  <div>
    <p>This is the icon</p>
    <img src={props.icon} alt="" />
  </div>
);

export default Icon;

Here is a working example: https://codesandbox.io/s/4z64wyqnn9

The problem with your current approach is that the final HTML is

<img src="Ico1" alt="" />

That's not going to work obviously.
When you import a PNG file, the relative location is translated into a full URL. So you need to make sure that what ends up as src is actually Ico1, which is a string just like "Ico1" but will be something like https://example.com/app/icon1.png.

You can either move the import line to the parent component, then pass the image along like so:

<MyComp chosenicon={Ico1}/>

If you want to keep the image file imports inside MyComp, you need to translate the string "Ico1" you've received in the props to the actual URL. One way is to add this to your MyComp.js:

const icons = { Ico1, Ico2 }; // no keys stated, so they are "Ico1" and "Ico2"

Now you can use

const MyComp = props => (
  <div>
    <img src={icons[props.chosenicon]} alt="" />
  </div>
);

Maybe try passing the image path as the prop, so props.chosenIcon will be ../icon1.png instead of Ico1. I think your problem may be that Ico1 is passed by reference rather than by value.

Your App.js should be like this:

import "./styles.css";
import Home from "./Home";

export default function App() {
  return (
    <div className="App">
      <Home />
    </div>
  );
}

Here is the imported image with props:

import icon from "./icon.jpg";

const Home = () => {
  const list = [
    { title: "icon1", logo: icon, alt: "icon1", id: 1 },
  ];
  return (
    <div className="App">
      {list.map((list) => (
        <div key={list.id}>
          <h1>{list.title}</h1>
          <img className="class" src={list.logo} alt={list.alt} />
        </div>
      ))}
    </div>
  );
};

export default Home;

you see full in here: https://codesandbox.io/s/image-props-37zo4

You can just pass the props like this and it should work

<Icon icon={require("./icon.jpg")} />

pass the image name as children with curly braces and use how u tried to use <Component> {icon1} </Component> . . . function Component(props){ return <img src = {props.children}/> }