How do I reference a local image in React

Question

How can I load image from local directory and include it in reactjs img src tag   I have an image called one jpeg inside the same folder as my component and I tried both  lt img src  one jpeg    gt  and  lt img src   one jpeg     gt  inside my renderfunction but the image does not show up  Also  I do not have access to webpack config file since the project is created with the official create-react-app command line util   Update  This works if I first import the image with import img from    one jpeg  and use it inside img src  img   but I have so many image files to import and therefore  I want to use them in the form  img src   image name jpeg

User · Answer

const photo   require        uploads images   obj photo    default       lt img src  photo  alt  quot user photo quot    gt

User · Answer

import React from  react      import image from    img one jpg    class Image extends React Component    render        return         lt img className  profile-image  alt  icon  src  image   gt                export default Image

User · Answer

My answer is basically very similar to that of Rubzen  I use the image as the object value  btw  Two versions work for me      name    Silver Card    logo   require    golden-card png      or   const goldenCard   require    golden-card png       name    Silver Card    logo   goldenCard    Without wrappers - but that is different application  too   I have checked also  import  solution and in few cases it works  what is not surprising  that is applied in pattern App js in React   but not in case as mine above

User · Answer

Inside public folder create an assets folder and place image path accordingly    lt img className  img-fluid        src     process env PUBLIC URL  assets images uc-white png         alt  logo   gt

User · Answer

I found another way to implement this  this is a functional component     const Image     icon     gt       const Img   require    path to your file   icon  svg   ReactComponent     return  lt Img   gt      Hope it helps

User · Answer

The best way is to import the image first and then use it    import React    Component   from  react   import logo from     logo svg   export default class Header extends Component     render         return          lt div className  row  gt           lt div className  logo  gt             lt img src  logo  width  100  height  50    gt           lt  div gt         lt  div gt

User · Answer

Step 1   import MyIcon from    img icon png  step 2    lt img     src  MyIcon      style   width  100    height  100       gt

User · Answer

I have used this way  and it works    I hope you useful   const logofooter   require        project-files images logo png      return    lt div className  blockquote text-center  gt               lt img src  logofooter  width  100  height  80    gt    lt div  gt

User · Answer

import image from    img one jpg    class Icons extends React Component      render          return           lt img className  profile-image  alt  icon  src  image   gt                 export default Icons

User · Answer

You need to wrap you image source path within      lt img src   path to one jpeg     gt    You need to use require if using webpack   lt img src  require  path to one jpeg      gt

User · Answer

First of all wrap the src in     Then if using Webpack   Instead of    lt img src     logo jpeg     gt    You may need to use require    lt img src  require    logo jpeg      gt     Another option would be to first import the image as such   import logo from    logo jpeg      with import  or      const logo   require    logo jpeg      with require  then plug it in      lt img src  logo    gt   I d recommend this option especially if you re reusing the image source

User · Answer

You have two ways to do it  First Import the image on top of the class and then reference it in your  lt img  gt  element like this  x000D   x000D  import React    Component   from  react   import myImg from     path myImg svg    export default class HelloImage extends Component     render         return  lt img src  myImg  width  100  height  50    gt          x000D   x000D   x000D   Second You can directly specify the image path using require     pathToImh img   in  lt img  gt  element like this  x000D   x000D  import React    Component   from  react     export default class HelloImage extends Component     render         return  lt img src  require    path myImg svg   width  100  height  50    gt         x000D   x000D   x000D

User · Answer

put your images in the public folder or make a subfolder in your public folder and put your images there  for example   you put  quot completative-reptile jpg quot  in the public folder  then you can access it as  src    completative-reptile jpg     you put completative-reptile jpg at public static images  then you can access it as  src    static images completative-reptile jpg

User · Answer

As some mentioned in the comments  you can put the images in the public folder  This is also explained in the docs of Create-React-App  https   create-react-app dev docs using-the-public-folder

User · Answer

the best way for import image is     import React    Component   from  react       image import import CartIcon from     images CartIcon png     class App extends Component     render         return         lt div gt             Call image in source like this            lt img src  CartIcon   gt        lt  div gt

User · Answer

For people who want to use multiple images of course importing them one by one would be a problem  The solution is to move the images folder to the public folder  So if you had an image at public images logo jpg  you could display that image this way  function Header       return        lt div gt         lt img src  quot images logo jpg quot  alt  quot logo quot   gt       lt  div gt          Yes  no need to use  public  in the source  Read further  https   daveceddia com react-image-tag

[reactjs] How do I reference a local image in React?

Examples related to reactjs