CODEWITHSUNDEEP
htmlcssreactjsimagewebpack
Ziya Arslan
Ziya Arslan

Reputation: 131

Have problem with importing image in react

Hello everyone I have some problems with importing images to my project. I tried before to import image on my old project the way that i did was working but not for that time. I imported image like:

import Fav from '../img/fav.png'

My file path is in src/img/fav.png and I'm trying to import from src/components/App.jsx

So the error I have is :

ERROR in ./img/fav.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)
 @ ./components/App.jsx 3:0-33
 @ ./entry.jsx
 @ multi ./entry.jsx

I tried to find some solutinons in the web bu i couldn't find. Thanks for help

Upvotes: 0

Views: 579

Answers (2)

Mykybo
Mykybo

Reputation: 1499

You need a webpack loader to load the image, e.g. file-loader:

{
  test: /\.(png|jpg|gif|svg)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        outputPath: 'images',
      },
    },
  ],
},

Upvotes: 1

Ziya Arslan
Ziya Arslan

Reputation: 131

The solution was here:

{
    test: /\.(png|svg|jpg|gif)$/,
    include: path.resolve(__dirname, 'src/assets'),
    use: [
      {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]'
        }
      }
    ]
  }

The path is included by default.

Upvotes: 0

Related Questions