Why my images don't loading in the my page?

user_15836397 0
Viewed 67

I use webpack and react. I wrote this code line ;

import image from './images/earthmap.jpg'

and ı get this error on the console

 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)

This is my webpack config file. I tried several ways but it didn't work.

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  output: {
    path: path.join(__dirname, "/dist"),
    filename: "index.bundle.js",
  },
  devServer: {
    port: 3010,
    watchContentBase: true,
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/i,
        use: ["url-loader"],
      },
      {
        test: /\.(png|svg|jpe?g|gif|jpg)$/,
        include: /images/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name].[ext]",
              outputPath: "images/",
              publicPath: "images/",
            },
          },
        ],
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)$/,
        loader: "url-loader?limit=100000",
      },
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
};

I tried with other images and image file formats but i had the same problem.

webpack reactjs loader
2 Answers

You need to use file-loader to load images.

{
    test: /\.(png|jpg|ttf|eot|woff|woff2)(\?.*)?$/,
    use: [
      {
        loader: "file-loader",
        options: {
          name: "[path][name].[ext]",
        },
      },
    ],
  },
user_55669350

What's likely is that you have a special character in your code somewhere.

This could be a line ending, or something similar copied into the code, or in jpg.

user_25515910
Related