React: webpack file loader doesn't loads correctly

Question

I have configured webpack to load jpg files but yet it my app doesn't load image and couldn't find them. here is webpack config:

const path = require("path");

module.exports = {
entry: [
    './app/app.jsx'
],


output: {
    path: path.resolve(__dirname, 'public'),
    publicPath: "public/",
    filename: 'bundle.js'
},
resolve: {

    alias: {
        Main: path.resolve(__dirname, 'app/components/Main.jsx'),
        Weather: path.resolve(__dirname, 'app/components/Weather.jsx'),
        About: path.resolve(__dirname, 'app/components/About.jsx'),
        Example: path.resolve(__dirname, 'app/components/Example.jsx'),
        WeatherParent: path.resolve(__dirname, 'app/components/WeatherParent.jsx'),
        WeatherForm: path.resolve(__dirname, 'app/components/WeatherForm.jsx'),
        WeatherMessage: path.resolve(__dirname, 'app/components/WeatherMessage.jsx'),
        openWeatherMap: path.resolve(__dirname, 'app/api/openWeatherMap.jsx'),


    },
    extensions: ['.js', '.jsx']
},
module: {
    rules: [
        {
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['react', 'es2015', 'stage-0']
                }
            },
            test: /\.jsx$/,
            exclude: /(node_modules)/,
        },
        {
            use: {
                loader: 'file-loader',
                options: {
                    name:'[name].[ext]',


                }
            },
            test: /\.(jpg|png)$/
        }
    ],

    loaders: [
        { test: /\.css$/, loader: "style-loader!css-loader"}
    ]
},
devtool: "cheap-module-eval-source-map"
};

and this is my main app file it consist of two routes to weather and about pages and two nav links for navigation:

import ReactDOM from 'react-dom'
import React from 'react'
import {BrowserRouter as Router, NavLink, Route, Switch} from 
'react-router-dom'
import Weather from "Weather";
import About from "About";
import "style-loader!css-loader!../app/Styles/appStyle.css";


ReactDOM.render(
   <Router>
      <div>
        <div className="topNav">
            <ul>
                <li><NavLink to="/" activeClassName="active">About</NavLink>
                </li>
                <li><NavLink to="/weather" 
                            activeClassName="active">Weather</NavLink></li>
            </ul>
        </div>

        <Switch>
            <Route path="/" component={About} exact={true}/>
            <Route path="/weather" component={Weather}/>
        </Switch>
    </div>
</Router>
,document.getElementById('app'));

and this is where i want to load the image but it doesn't show, the actual address of image seems to be correct in browser and i don't know what the problem is in webpack config file webpack emits file correctly but browser won't show the image:

import React, {Component} from 'react';
import {Link, Route} from 'react-router-dom';
import WeatherParent from 'WeatherParent';
import Example from 'Example';
import "style-loader!css-loader!../Styles/appStyle.css";
let weatherIcon = require('../img/weatherIcon.jpg');



export default class Weather extends Component {
   render() {
       return (
         <div>
            <div>
                <ul>
                    <li>
                        <Link
                            to={`${this.props.match.url}/weather`}
                            className="active"><img
                            enter code heresrc={weatherIcon}/>
                        </Link>
                    </li>
                    <li><Link to={`${this.props.match.url}/example`} 
             className="active">Example</Link></li>
                </ul>

            </div>
            <div>
                <Route path={`${this.props.match.url}/weather`} 
                  component={WeatherParent}/>
                <Route path={`${this.props.match.url}/example`} 
                  component={Example}/>
            </div>
        </div>
    )
 }
}

Answer 1

Looks like you're trying to 'require' the .jpg file.. instead you should just be using a string.

let weatherIcon = '../img/weatherIcon.jpg';

Also, try replacing file-loader with url-loader in your webpack config.