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.

Answer 2

This works for me

import Img from './Example.png'

then in your img tag

<img src = {Img} />

Answer 3

From the error it seems that you have not specfied the loader for font-icons type of files such as woff, ttf and many others.

Also make sure that you have url-loader and file-loader installed.

Use below loader in your webpack config file -

   {
            test    : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
            loader  : 'file'
   },

Similarly for loading images you can use following loaders

  {
          test    : /\.(png|jpg|jpeg)$/,
          include : path.join(__dirname, 'img'),
          loader  : 'url-loader?limit=30000&name=images/[name].[ext]'
  }

Also if you use url loader such as this one

'url?limit=10000&mimetype=image/svg+xml'

it means that maximum file size which can be loaded via url is of 10kb and their mimetype( a way to recognize media file types) is svg image and you will receive the file as an http resource url.

If your file size is greater than 10 kb then it will not be loaded by url-loader instead it will be loaded by file-loader and file-loader will serve the files as static assest.

Answer 4

Try this one, I'm using this config in my current project.

  module: {
    loaders: [{
      test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url?limit=10000&mimetype=application/font-woff',
    }, {
      test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url?limit=10000&mimetype=application/font-woff2',
    }, {
      test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url?limit=10000&mimetype=application/octet-stream',
    }, {
      test: /\.otf(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url?limit=10000&mimetype=application/font-otf',
    }, {
      test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'file',
    }, {
      test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url?limit=10000&mimetype=image/svg+xml',
    }, {
      test: /\.png$/,
      loader: 'file?name=media/[name].[ext]',
    }, {
      test: /\.jpg$/,
      loader: 'file?name=media/[name].[ext]',
    }],
  }