Image import error
Closed this issue · 2 comments
agustinhopneto commented
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 commented
@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 commented
Thank you!