image not rendering using react and webpack

Question

Hi there so I am not using the command create react app so i have built every thing from scratch and this is my webpack configuration:

 const path = require("path"); module.exports = { mode: "development", entry: "./index.js", output: { path: path.resolve(__dirname, "public"), filename: "main.js", }, target: "web", devServer: { port: "3000", static: ["./public"], open: true, hot: true, liveReload: true, }, resolve: { extensions: [".js", ".jsx", ".json", ".ts"], }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: "babel-loader", }, { test: /\.(png|svg|jpg|jpeg|gif)$/i, use: ['file-loader','url-loader'] }, { test: /\.css$/i, use: ['style-loader', 'css-loader'], }, ], }, };

then I was trying to add images to my app using css background-image:url("") or even by importing the image than put it inside the src of an img tag and in both cases the image was not displayed to the screen. this is what I did so far:

 import React from 'react'; import './LoginScreen.css'; import i from '../../Images/online_auction.jpg' const LoginScreen = ()=>{ return ( <div className="container"> <img src={i}/> <label>Sign In</label> <input /> </div> ) } export default LoginScreen;

 *,*::before,*::after{ box-sizing: border-box; font-family:Arial, Helvetica, sans-serif; }.body{ margin: 0 }.container{ background-image: url("../../Images/online_auction.jpg"); height: 220vh; width: 100vw; background-size: cover; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

I would be grateful if you give me a hand in this.

Answer 1

1. Add bable script to your html file You can find it here: https://reactjs.org/docs/add-react-to-a-website.html

2. use image like this:

<img src={require ("img path") />