Correct path for img on React js

Question

I have some problem with my images on my react project  Indeed I always thought that relative path into src attribute was built on the files architecture  Here my files architecture   components     file1 jsx     file2 jsx     file3 jsx container img js         However I realized that the path is built on the url  In one of my component  for example into file1 jsx  I have this   localhost details 2  lt img src     img myImage png    gt  - gt  works  localhost details 2 id  lt img src     img myImage png    gt  - gt  doesn t work  images are not displayed   How is it possible to solve this problem  I want that in any form of routes handled by react-router  all images can be displayed with the same path

User · Answer

Make an images folder inside src  src images  And keep your image in it  Then import this image in your component use your relative path   Like below- import imageSrc from    images image-name jpg   And then in your component   lt img title  quot my-img quot  src  imageSrc  alt  quot my-img quot    gt   Another way is to keep images in public folder and import them using relative path  For this make an image folder in public folder and keep your image in it  And then in your component use it like below   lt img title  quot my-img quot  src   images my-image jpg  alt  quot my-img quot    gt  Both method work but first one is recommended because its cleaner way and images are handled by webpack during build time

User · Answer

Place the logo in your public folder under e g  public img logo png and then refer to the public folder as  PUBLIC URL     lt img src   PUBLIC URL  img logo png   gt    The use of  PUBLIC URL  in the above will be replaced with the URL of the public folder during the build  Only files inside the public folder can be referenced from the HTML   Unlike   img logo png  or  logo png     PUBLIC URL  img logo png  will work correctly both with client-side routing and a non-root public URL  Learn how to configure a non-root public URL by running npm run build

User · Answer

You re using a relative url  which is relative to the current url  not the file system   You could resolve this by using absolute urls   lt img src   http   localhost 3000 details img myImage png    gt    But that s not great for when you deploy to www my-domain bike  or any other site   Better would be to use a url relative to the root directory of the site   lt img src   details img myImage png    gt

User · Answer

Import Images in your component  import RecentProjectImage 3 from        asset image recent-projects latest news 3 jpg    And call the image name on image src  RecentProjectImage 3  as a object    lt Img src  RecentProjectImage 3  alt      gt

User · Answer

Adding file-loader npm to webpack config js per its official usage instruction like so   config module rules push                test      png jpg gif             use                                  loader   file-loader                   options                                        worked for me

User · Answer

Some older answers din t work  others are good but won t explain the theme  in summary   If image is in  public  directory  Example   public charts a png    In html    lt img id  imglogo  src   charts logo svg    gt    In JavaScript     Create image to new img  dynamically     var img1   document createElement  img      img1 src    charts a png       Set image to existing img with id as  img1   dynamically     document getElementById  img1   src    charts a png     If image is in  src  directory   Example   src logo svg    In JavaScript     import logo from    logo svg     img1 src   logo      In jsx    lt img src  logo    gt

User · Answer

In create-react-app relative paths for images don t seem to work  Instead  you can import an image  import logo from    logo png     relative path to image   class Nav extends Component        render              return                 lt img src  logo  alt   quot logo quot    gt

User · Answer

If the image is placed inside the  src  folder  use the following   lt img src  require     logo png    alt  quot logo quot  className  quot brand-logo quot   gt

User · Answer

With create-react-app there is public folder  with index html       If you place your  myImage png  there  say under img sub-folder  then you can access them through    lt img src  window location origin     img myImage png     gt

User · Answer

If you used create-react-app to create your project then your public folder is accessible  So you need to add your image folder inside the public folder       public images     lt img src   images logo png    gt

User · Answer

A friend showed me how to do this as follows          works when the file requesting the image  e g    example js   is on the same level within the folder tree structure as the folder  images

[javascript] Correct path for img on React.js

Examples related to javascript

Examples related to reactjs

Examples related to webpack