Image not able to load react typescript

Question

Here is my <img> tag

  <li className="dropdown user user-menu">
                                <a href="#" className="dropdown-toggle" data-toggle="dropdown">
                                    <img src="/public/assets/images/user2-160x160.jpg" className="user-image" alt="User Image" />
                                        <span className="hidden-xs">Alexander Pierce</span>
                                </a>
<li/>

This is my structure

Does this answer your question? [React won't load local images](https://stackoverflow.com/questions/34582405/react-wont-load-local-images) — thisshri, Mar 29 '20 at 06:11
Can you show where the calling component resides in heirarchy? — Shravan Dhar, Mar 29 '20 at 06:11

score 3 · Answer 1 · answered Mar 29 '20 at 06:12

Import the image at the top as you would any other module! ( assuming you got modules enabled in typescript and then just pass it is as a variable to jsx:

import myimage from "./../.../path/images/user2-160x160.jpg";
...

 <img alt="media-icon-link" className="media-icon-link" src={myimage} />

score 1 · Accepted Answer · answered Mar 29 '20 at 12:23

If your images are in the public folder Like my folder structure :

"/assets/images/user2-160x160.jpg"

in your <img> src instead of importing

'../../public/assets/images/user2-160x160.jpg';

This will work

<img className="user-image"  src="/assets/images/user2-160x160.jpg" alt="User Image" />

score -1 · Answer 3 · answered Mar 29 '20 at 06:15

-1

Same with above answer, As far as I know you can use require api like this

<img alt="media-icon-link" className="media-icon-link" src={require("./../.../path/images/user2-160x160.jpg")} />

It's just depends on your taste

answered Mar 29 '20 at 06:15

Stark Jeon

1,107
9
24

Image not able to load react typescript

3 Answers3