Can't render an img with react and webpack

Question

Hi guys I'm new to Webpack so I'm having some problems when trying to add the src of an img tag because I'm getting an error, I already tried some solutions that I saw in other similar questions like adding the url-loader but I still can't get it to work

I'm getting this error in my code

ERROR in ./client/src/img/logo.png 1:0
[0] Module parse failed: Unexpected character '�' (1:0)
[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
[0] (Source code omitted for this binary file)
[0]  @ ./client/src/pages/Homepage.js 108:9-35
[0]  @ ./client/src/App.js 3:0-40 9:38-46
[0]  @ ./client/src/index.js 3:0-24 4:50-53

My Webpack.config.js code

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        main: path.join(__dirname, 'client/src/index.js')
    },
output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js'
},
plugins: [new HtmlWebpackPlugin({
    title: 'Ig Scraper',
    template: path.join(__dirname, 'client/templates/index.ejs'),
    filename: 'index.html'
})],
module: {
    rules: [
        {
            test: /\.(js|jsx)$/,
            exclude: /(node_modules|express)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: [
                        "@babel/preset-env",
                        "@babel/preset-react"
                    ]
                },
            }
        },
        {
            test: /\.(html)$/,
            use: {
                loader: 'html-loader',
                options: {
                    attrs: [':data-src']
                }
            }
        },
        // {
        //     test: /\.(png|jpg)$/,
        //     include: path.join(__dirname, '/client/img'),
        //     loader: 'file-loader'
        // },
        {
            test: /\.css$/i,
            use: ['style-loader', 'css-loader'],
        },
        {
            test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
            use: [
                {
                    loader: 'url-loader?limit=100000'
                }
            ]
        }
    ]
},
devServer: {},
resolve: {
    extensions: ["*", ".js", ".jsx"]
},
resolveLoader: {
    extensions: ["babel-loader"]
},
devtool: 'source-map',
mode: 'development',
resolve: {
    fallback: {
        fs: false
    }
}

};

My Homepage.js code

import React, { useState } from "react";
import axios from "axios";
import '../assets/Homepage.css'
// import logo from '../img/instagramLogo.png'

const Homepage = () => {


return (
    <>
        <div className="container">
            <div className="homepage">
                <div className="homepage__igAssets">
                    <img src={require('../img/logo.png')} alt="" className="ig__logo" />
                    {/* <img src="./assets/instagram.png" alt="" className="ig__text" /> */}
                </div>
                <h1 className="homepage__title">¡Let's scrape your instagram account! </h1>
                <div className="homepage__elements">
                    <input className="homepage__input" placeholder="Username..." value= {username} onChange={onChange} />
                    <button className="homepage__button" onClick={onClick}>Get instagram followers!</button>
                </div>
                {renderData()}
            </div>
        </div>
    </>
);
};

export default Homepage;

My files organization

Looks like a misconfiguration, webpack seems to be trying to parse your images as js code. Does it also happen when you uncomment the commented code from `webpack.config.js` and `homepage.js` ? — Hollyol, Oct 21 '21 at 16:18
Yes it still happens, I commented it because I was trying a lot of solutions and that didn't worked — CesarDlr, Oct 22 '21 at 02:28

Hollyol · Accepted Answer · 2021-10-22T08:13:17.003

Most likely, this error comes from Homepage.js, on the line:

<img src={require('../img/logo.png')} ... />

~~Require is not meant for images, but for js modules (learn more here).~~

Erratum: Above is about require in nodejs, it may not be the way to go, but require seems to work fine with webpack.

The way to use images with react would be:

// First, import the image file
import image from './path-to-image.png';

// Later, use it as source in the render
<img src={image} ... />

Your webpack.config.js looks fine (although i'm no expert at such things).

Add: Here is an other question highly related that might help you

Thanks bro, now it works :) – CesarDlr Oct 22 '21 at 13:41 — CesarDlr, Oct 22 '21 at 13:41

Can't render an img with react and webpack

1 Answers1