How to get Webpack Dev Server to display images stored locally?

Question

I migrated a project I have been working on to Webpack 2 and this has been kind of a headache. But I have gotten my project to preview using Webpack dev server, except it won't show my image. All I get is this error in the browser console GET http://localhost:8080/logo.jpg 404 (Not Found)

and in MacOS Console:

   ERROR in ./js/components/Global/Menu.jsx Module not found: Error: Can't resolve 'logo.jpg' in '/Users/user1/Documents/AAA/app/js/components/Global'

This is my Webpack configuration:

    const path = require('path');

    module.exports = {
      context: __dirname + "/app",

      entry: {
        app: "./js/app.js",
        javascript: "./js/app.js",
        html: "./index.html",
      },

      output: {
        //output.path: "[name].js",
        path: __dirname + "/dist",
        filename: "[name].js"
      },

      resolve: {
        alias: { 'react/lib/ReactMount': 'react-dom/lib/ReactMount' },
        extensions: [ '*', '.js', '.jsx', '.json'],
        modules:[__dirname, './app/js', 'node_modules'],
      },

      module: {
        rules: [
          {
            test: /\.jsx?$/,
            include: [
              path.resolve(__dirname, "app")
            ],
            loaders: ["babel-loader"],
          },
          {
            test: /\.html$/,
            loader: ["file-loader?name=[name].[ext]"],
          },
          {
            test: /\.(jpe?g|png|gif|svg)$/i,
            include : path.join(__dirname, 'app'),
            loader  : 'url-loader?limit=30000&name=images/[name].[ext]'
          }
        ],
      },
    }

The migration has broken multiple images but heres one and I can use is it as a base to fix the others:

import React, { Component } from 'react';
import { Link } from 'react-router';

import Logo from "logo.jpg";

export default class Menu extends Component {
  render() {
    return (
      <div className='Menu' id='Menu'>
        <img src={Logo}></img>
        <Link to='/'>Home</Link>  <Link to='/about'>Clothing</Link>  <Link to='/Cart'>Cart</Link>
        <hr />
      </div>
    );
  }
}

Should I use url('logo.jpg')? Why is the dev server not finding the images and displaying them?

EDIT

Tried with:

let img = new Image();
img.src = require('logo.jpg');

and <img src={img.src}>, but it gives me the same error.

Answer 1

Your webpack configuration doesn't declare explicitly output.publicPath setting. A basic configuration might be like:

  output: {
    publicPath: '/',
    path: __dirname + "/dist",
    filename: "[name].js"
  },

Further consideration: since your logo.jpg lives in the same directory as your component, why not importing it with a ./ relative path?

import Logo from "./logo.jpg";