Hey there! I decided not to use the create react app command and instead built everything from scratch. Below 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'],
},
],
},
};Recently, I encountered an issue when trying to add images to my app using CSS background-image:url("") or by importing the image and placing it inside the src of an img tag. Unfortunately, in both cases, the image did not display on the screen. Here's what I've done 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 really appreciate any help or advice you can offer regarding this issue.