1

I'm trying to set up a React project using WebPack by myself without using create-react-app or any other starters. I'm having trouble getting local images to load.

webpack.config.js

//webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: "./src/index.tsx",
   output: {
      path: path.join(__dirname, '/dist'),
      filename: 'bundle.js'
   },
   devServer: {
      port: 8080
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
         },
         {
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
        },
        {
            test: /\.tsx?$/,
            exclude: /node_modules/,
            loader: 'ts-loader'
         },
         {
            test: /\.(png|svg|jpg|jpeg|gif|webp)$/i,
            type: 'asset/resource',
          },
      ]
   },
   resolve:
    {
        extensions: [ '.tsx', '.ts', '.js' ],
     },
   plugins:[
       new HtmlWebpackPlugin({
            template: path.join(__dirname,'/src/index.html')
       }) 
   ]
}

folder structure

enter image description here

index.tsx

//_index.js_

import React from "react";
import ReactDOM from "react-dom";
import HeroSwiper from "./components/HeroSwiper";
import LP from "./assets/img/LP.jpg";


import "./styles.css";

const App = () => {
  return (
    <div className="wrapper">
      <img src={LP} alt="Slide 1" />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

I'm getting a TS2307: Cannot find module './assets/img/LP.jpg' or its corresponding type declarations.

João Pedro
  • 794
  • 2
  • 12
  • 28

1 Answers1

0

Use import method to import image then assign it to src of image tag

import LP from "./assets/img/LP.jpg";
...
<img src={LP} />
Ramkumar G
  • 415
  • 1
  • 8