How to import image svg png in a React Component

Question

I am trying to import an image file in one of my react component  I have the project setup with web pack  Here s my code for the component   import Diamond from        assets linux logo jpg     export class ItemCols extends Component       render            return                lt div gt                   lt section className  one-fourth  id  html  gt                       lt img src  Diamond    gt                   lt  section gt               lt  div gt                       Here s my project structure      I have setup my webpack config js file in the following way         test      jpg png svg         loader   url-loader       options          limit  25000                  test      jpg png svg         loader   file-loader       options          name    path  name   hash   ext                PS  I can get image from any other remote source but not locally saved images  The JavaScript Console also doesn t give me any error  Please anything helps  I am quite new to react and unable to find what am I doing wrong

User · Accepted Answer

try using   import mainLogo from   logoWhite png      then in the render function of Jsx insert the mainLogo variable  class NavBar extends Component     render         return          lt nav className  nav  style  nbStyle  gt           lt div className  container  gt              right below here            lt img  src  mainLogo  style  nbStyle logo  alt  fireSpot   gt           lt  div gt         lt  nav gt

User · Answer

Solved the problem  when moved the folder with the image in src folder  Then I turned to the image  project created through  create-react-app   let image   document createElement  img    image src   require     assets police png

User · Answer

I also had a similar requirement where I need to import  png images  I have stored these images in public folder  So the following approach worked for me   lt img src  process env PUBLIC URL      Images image1 png   alt  quot Image1 quot  gt  lt  img gt    In addition to the above I have tried using require as well and it also worked for me  I have included the images inside the Images folder in src directory   lt img src  require    Images image1 png     alt  quot Image1 quot   gt

User · Answer

import React   Component  from  react   import imagename from    imagename png     image is in the current folder where the App js exits   class App extends React  Component      constructor props        super props       this state         imagesrc imagename    as it is imported                 render           return             lt ImageClass          src  this state imagesrc            gt                    class ImageClass extends React Component      render            return                 lt img src  this props src  height  200px  width  100px    gt                      export default App

User · Answer

There are few steps if we dont use  quot create-react-app quot   webpack 5 23 0  first we should install file-loader as devDedepencie next step is to add rule in webpack config  x000D   x000D        test      png jpe g gif   i      loader   file-loader     x000D   x000D   x000D     then in our src directory we should make file called declarationFiles d ts for example  and register modules inside  x000D   x000D  declare module    jpg   declare module    png   x000D   x000D   x000D    then restart dev-server  After these steps we can import and use images like in code bellow  x000D   x000D  import React from  react   import image from    img1 png   import    helloWorld scss    const HelloWorld        gt       lt  gt       lt h1 className  main  gt React TypeScript Starter lt  h1 gt           lt img src  image  alt  some example image    gt     lt   gt     export default HelloWorld  x000D   x000D   x000D   Works in typescript and also in javacript just change extension from  ts to  js Cheers

User · Answer

Simple way is using location origin  it will return your domain  ex  http   localhost 8000  https   yourdomain com then concat with some string     Enjoy     lt img src   location origin  quot  images robot svg quot   alt  quot robot quot   gt   More images   var images     quot img1 jpg quot    quot img2 png quot    quot img3 jpg quot      images map   image index    gt        lt img key  index          src   location origin  quot  images  quot  image          alt  quot robot quot      gt

User · Answer

You can also try      var imageName   require  relative path of image from component file             class XYZ extends Component       render            return                               lt img src  imageName default  alt  quot something quot   gt                                          Note  Make sure Image is not outside the project root folder

User · Answer

If the images are inside the src assets folder you can use require with the correct path in the require statement   var Diamond   require        assets linux logo jpg      export class ItemCols extends Component       render            return                lt div gt                   lt section className  one-fourth  id  html  gt                       lt img src  Diamond    gt                   lt  section gt               lt  div gt

User · Answer

You can use require as well to render images like    then in the render function of Jsx insert the mainLogo variable  class NavBar extends Component     render         return          lt nav className  nav  style  nbStyle  gt           lt div className  container  gt              right below here            lt img src  require    logoWhite png    style  nbStyle logo  alt  fireSpot   gt           lt  div gt         lt  nav gt

[javascript] How to import image (.svg, .png ) in a React Component

Examples related to javascript

Examples related to reactjs

Examples related to webpack