Img is not loading at React component

Question

I am trying to load an image at my component:

import React from 'react';
import style from './Sidebar.scss';

const Sidebar = () => (
  <nav className={style.sidebar}>
    <ul className={style.wrapper}>
      <li className={style.item}>
        <div>
          <img className={style.logo} src="../../img/myImg.png" alt="contactto logo" />
        </div>
      </li>
    </ul>
  </nav>
);

export default Sidebar;

But it is not working, I am loading the Roboto font and is working correctly.

Here is my snippet code from webpack.config:

{
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        loader: 'file-loader?name=fonts/[name].[ext]',
      },
      {
        test: /\.(png|svg|jpg)$i/,
        use: {
          loader: 'file-loader?name=img/[name].[ext]',
        },
      },

My img is not copied to my dist folder.

Mayank Shukla · Accepted Answer · 2017-06-22T14:34:42.583

1

You need to import that image first:

import Image from '../../img/myImg.png';

Then use this image, like this:

img className = {style.logo} src = {Image} alt = "contactto logo" />

edited Jun 22 '17 at 14:34

answered Jun 22 '17 at 14:12

Mayank Shukla

100,735
18
158
142

I got this error: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type. – Alessander França Jun 22 '17 at 14:15
1

@AlessanderFrança it should work check the doc: https://webpack.js.org/guides/asset-management/#loading-images – Mayank Shukla Jun 22 '17 at 14:26
@Myank Shukla thanks, it worked. I had an error with my test regex – Alessander França Jun 22 '17 at 14:36

Img is not loading at React component

1 Answers1