OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

React passing import name as prop and adding to image src

  • Thread starter Thread starter user10044012
  • Start date Start date
U

user10044012

Guest
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:

Code:
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:

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

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

Code:
<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?

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

<p>In this case the prop value is <strong>Ico1</strong>.</p>

<p>I need to pass the prop in the img src like so:</p>

<p>code below:</p>

<pre><code>import React from 'react';
import Ico1 from '../icon1.png';


const MyComp = (props) => <div>

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

</div>
}

</div>

export default MyComp
</code></pre>

<p>My problem is that when I add this:</p>

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

<p>...it shows the image but if I do this:</p>

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

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

<p>How can I get this to work so it shows the image?</p>
 

Latest posts

Top