Load local images in React js

Question

I have installed React using create-react-app  It installed fine  but I am trying to load an image in one of my components  Header js  file path  src components common Header js  but it s not loading  Here is my code  import React from  react     export default      gt      var logo1          lt img          src  quot https   s3 amazonaws com codecademy-content courses React react photo-goose jpg quot        src    src images logo png         alt  quot Canvas Logo quot        gt         return        lt div id  quot header-wrap quot  gt         lt div className  quot container clearfix quot  gt           lt div id  quot primary-menu-trigger quot  gt             lt i className  quot icon-reorder quot  gt  lt  i gt           lt  div gt                                lt div id  quot logo quot  gt             lt a href  quot   quot  className  quot standard-logo quot  data-dark-logo   images logo-dark png  gt  logo1  lt  a gt             lt a href  quot   quot  className  quot retina-logo quot  data-dark-logo   images logo-dark 2x png  gt               lt img src   var www html react-demo src images logo 2x png  alt  quot Canvas Logo quot    gt             lt  a gt           lt  div gt         lt  div gt       lt  div gt           If I write the image path as src  require    src images logo png    in my logo1 variable  it gives the error   Failed to compile  Error in   src Components common Header js Module not found    src images logo png in  var www html wistful src Components common  Please help me solve this  Let me know what I am doing wrong here

User · Answer

First  you need to create a folder in src directory then put images you want  Create a folder structure like src- gt images- gt linechart png  then import these images in JSX file import linechart from          images linechart png     then you need use in images src like below   lt img src  linechart  alt  quot piechart quot  height  quot 400px quot  width  quot 400px quot  gt  lt  img gt

User · Answer

In order to load local images to your React js application  you need to add require parameter in media sections like  or Image tags  as below   image  require       uploads temp jpg

User · Answer

If you want load image with a local relative URL as you are doing  React project has a default public folder  You should put your images folder inside  It will work

User · Answer

In React js latest version v17 0 1  we can not require the local image we have to import it  like we use to do before   require        src Assets images fruits png    Now we have to import it like   import fruits from        src Assets images fruits png   Before React V17 0 1 we can use require      and it is working fine

User · Answer

If you have questions about creating React App I encourage you to read its User Guide  It answers this and many other questions you may have   Specifically  to include a local image you have two options    Use imports      Assuming logo png is in the same folder as JS file import logo from    logo png          later  lt img src  logo  alt  logo    gt     This approach is great because all assets are handled by the build system and will get filenames with hashes in the production build  You   ll also get an error if the file is moved or deleted   The downside is it can get cumbersome if you have hundreds of images because you can   t have arbitrary import paths    Use the public folder      Assuming logo png is in public  folder of your project  lt img src  process env PUBLIC URL     logo png   alt  logo    gt     This approach is generally not recommended  but it is great if you have hundreds of images and importing them one by one is too much hassle  The downside is that you have to think about cache busting and watch out for moved or deleted files yourself   Hope this helps

User · Answer

In React or any Javascript modules that internally use Webpack  if the src attribute value of img is given as a path in string format as given below  e g   lt img src    src images logo png     gt  or  lt img src   src images logo png    gt    then during build  the final HTML page built contains src   src images logo png   This path is not read during build time  but is read during rendering in browser  At the rendering time  if the logo png is not found in the  src images directory  then the image would not render  If you open the console in browser  you can see the 404 error for the image  I believe you meant to use   src directory instead of  src directory  In that case  the development directory   src is not available to the browser  When the page is loaded in browser only the files in the  public  directory are available to the browser  So  the relative path   src is assumed to be public src directory and if the logo png is not found in public src images  directory  it would not render the image   So  the solution for this problem is either to put your image in the public directory and reference the relative path from public directory or use import or require keywords in React or any Javascript module to inform the Webpack to read this path during build phase and include the image in the final build output  The details of both these methods has been elaborated by Dan Abramov in his answer  please refer to it or use the link  https   create-react-app dev docs adding-images-fonts-and-files

User · Answer

we don t need base64   just give your image path and dimensions as shown below   import Logo from    Logo png    local path          var doc new jsPDF  p    mm    a4            var img   new Image            img src  Logo          doc addImage img   png   10  78  12  15

User · Answer

You have diferent ways to achieve this  here is an example   import myimage from            wherever is it    in your img tag just put this into src    lt img src  myimage     gt    You can also check official docs here  https   facebook github io react-native docs image html

User · Answer

Best approach is to import image in js file and use it  Adding images in public folder have some downside    Files inside public folder not get minified or post-processed  You can t use hashed name  need to set in webpack config  for images   if you do then you have to change names again and again  Can t find files at runtime  compilation   result in 404 error at client side

User · Answer

Instead of use img src     try to create a div and set background-image as the image you want   Right now it s working for me   example   App js  import React    Component   from  react   import    App css      class App extends Component      render         return          lt div gt           lt div className  myImage  gt   lt  div gt         lt  div gt                export default App    App css   myImage     width  60px    height  60px    background-image  url    icons add-circle png      background-repeat  no-repeat    background-size  100

[image] Load local images in React.js

Examples related to image

Examples related to reactjs

Examples related to local