As a new react developer, I am currently using webpack and trying to load an image. However, the image is not showing up and there are no error messages being displayed. Any ideas on what could be causing this issue?
This is my webpack configuration:
module.exports = {
module: {
rules: [
{
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
loader: 'url-loader?limit=100000',
},
],
},
resolve: {
extensions: ['*', '.js', '.jsx', '.tsx', '.ts'],
},
};import Image from '../../icons/MicrosoftTeamsImage.png';
<img src={require('../../icons/MicrosoftTeamsImage.png')} alt="icon" />
I also tried like this:
<img src={Image} alt="some example image" alt="icon" />The image appears like this:
https://i.sstatic.net/iF4mA.png
I have installed the necessary loaders by running the following command:
yarn add --save file-loader url-loader
Edit: After checking the network tab, I noticed that the status is 200. However, the request URL shows as http://..../[object%20Module]. I attempted to fix it with the following modification:
<img src={require('../../icons/MicrosoftTeamsImage.png').default} alt="icon" />
Now, the request URL displays as http://..../29691089ca26d06beb2854d687a560cf.png, but unfortunately, the image still does not display.