Image import error

[agustinhopneto]

Hello!
I have this problem when I try to import a image:

import React from 'react';
import { FiMenu } from 'react-icons/fi';

import CircleButton from '../CircleButton';
import { Container } from './styles';

import logo from '../../assets/logo.png';

const Menu: React.FC = () => {
  return (
    <Container>
      <header>
        <CircleButton
          color="#60c3ad"
          backgroundColor="#fff"
          icon={FiMenu}
          type="button"
        />

        <img src={logo} alt="" />
      </header>
    </Container>
  );
};

export default Menu;

And it returns:

ERROR in ./src/assets/logo.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
 @ ./src/components/Menu/index.tsx 6:0-41 15:9-13
 @ ./src/App.tsx
i ｢wdm｣: Failed to compile.

Am I doing something wrong?

[diego3g]

@agustinhopneto Currently we did not implement the url-loader for images inside Babel, you can just yarn add url-loader and put this inside the rules array inside webpack/react.webpack.js:

{
  test: /\.(png|jpg|gif)$/i,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 8192,
      },
    },
  ],
},

[agustinhopneto]

Thank you!