title: How to import image (.svg, .png ) in a React Component
body: <p>I am trying to import an image file in one of my react component. I have the project setup with web pack</p>
  
  <p>Here's my code for the component </p>
  
  <pre><code>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;
          )
      } 
  }
  </code></pre>
  
  <p>Here's my project structure. </p>
  
  <p><a href="https://i.stack.imgur.com/MEY3R.png" rel="noreferrer"><img src="https://i.stack.imgur.com/MEY3R.png" alt="enter image description here"></a></p>
  
  <p>I have setup my webpack.config.js file in the following way </p>
  
  <pre><code>{
      test: /\.(jpg|png|svg)$/,
      loader: 'url-loader',
      options: {
        limit: 25000,
      },
  },
  {
      test: /\.(jpg|png|svg)$/,
      loader: 'file-loader',
      options: {
        name: '[path][name].[hash].[ext]',
      },
  },
  </code></pre>
  
  <p>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.</p>