Can't use local image in react.js

Question

Basically I'm unable to use local images and I'm really unsure why. I've installed url-loader and file-loader as well as trying to require the file.

HeaderNavigation.js ( The image I'm trying to use is in the same directory and is referenced as the Brand Image).

/**
 * Created by Hewlbern on 17-Jan-17.
 */
import React from 'react';
import { LinkContainer } from 'react-router-bootstrap';
import { Nav, Navbar, NavDropdown, MenuItem, NavItem } from 'react-bootstrap';

//import NavLink from "./Navlink"

export default React.createClass ({
    render() {
        /* <img src={require('./Example.png')} /> */
       // var Replace = "http://cdn.playbuzz.com/cdn/08421690-8191-4264-b479-ce42341e2389/be95b1c7-c95d-41c2-ae7d-1713e67462f3.jpg";
        return (
            <div>
                <Navbar collapseOnSelect>
                    <Navbar.Header>
                        <Navbar.Brand>
                            <LinkContainer to ="/">
                                <img src = {require('./Example.png')}/>
                            </LinkContainer>
                        </Navbar.Brand>
                        <Navbar.Toggle />
                    </Navbar.Header>
                    <Navbar.Collapse>
                        <Nav bsStyle = "tabs" >
                            <LinkContainer to ="/Product">
                                <NavItem eventKey = "{1}" >
                                        Product
                                </NavItem>
                            </LinkContainer>
                            <LinkContainer to ="/About">
                                <NavItem eventKey = "{2}">
                                        About
                                </NavItem>
                            </LinkContainer>
                            <NavDropdown id="nav-dropdown" title  ="More" eventKey = "{3}" pullRight>
                                <LinkContainer to ="/Background">
                                    <MenuItem eventKey = "{1}">
                                            Background
                                    </MenuItem>
                                </LinkContainer>
                                <LinkContainer to ="/Contact Us">
                                    <MenuItem eventKey = "{2}">
                                            Contact Us
                                    </MenuItem>
                                </LinkContainer>
                            </NavDropdown>
                        </Nav>
                    </Navbar.Collapse>
                </Navbar>
            </div>
        );
    }
});

This is my webpack file.

webpack.config.js

var webpack = require("webpack");
var path = require("path");

var DEV = path.resolve(__dirname, "dev");
var OUTPUT = path.resolve(__dirname, "output");

var config = {
    entry: DEV + "/App.js",
    output: {
        path: OUTPUT,
        filename: "myCode.js"
    },
module: {
    loaders: [
        // js
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loaders: ['babel'],
            presets: ['es2015', 'react'],
            include: DEV,
        },
        //    PNG
        {
            test: /\.(gif|jpe?g|png|ico)$/,
            loader: 'url-loader?limit=10000'
        },

        {
            test: /\.(png|jpg)$/,
            loader: 'file-loader'
        },

        // CSS
        {
            test: /\.scss$/,
            include: path.join(__dirname, 'client'),
            loader: 'style-loader!css-loader!sass-loader'
        },
    ]
  }
};

module.exports = config;

Answer 1

If you want load image with a local relative URL as you are doing. React project has a default public folder. You should put your images folder inside. It will work.