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;

The error was DOMPropertyOperations.js:142 GET file:///C:/Users/Hewlbern/Desktop/Software%20Dev/LegalinkApp/dev/Assets/fonts/glyphicons-halflings-regular.woff2 net::ERR_FILE_NOT_FOUND — LeCoda
– LeCoda, Commented Feb 8, 2017 at 6:14

Rivon · Accepted Answer · 2017-10-16 06:23:03Z

9

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.

answered Oct 16, 2017 at 6:23

Rivon

5845 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Developer Strange Over a year ago

How to give path?

reddy Over a year ago

Simple and works. Thanks. I was trying to simply load one single image and those loader and webpack configuration methods are giving me headache. With this I can just do like <img src="01.jpg"/> and it works.

Broman · Accepted Answer · 2017-03-20 14:24:49Z

5

This works for me

import Img from './Example.png'

then in your img tag

<img src = {Img} />

answered Mar 20, 2017 at 14:24

Broman

814 bronze badges

Comments

Thanh Nguyen · Accepted Answer · 2017-02-08 06:51:57Z

1

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]',
    }],
  }

answered Feb 8, 2017 at 6:51

Thanh Nguyen

5,36212 gold badges45 silver badges76 bronze badges

1 Comment

LeCoda Over a year ago

Thanks @NguyenThanh - Could you explain how the code works please? For example, "&mimetype=application/font-woff'," What does this mean?

WitVault · Accepted Answer · 2017-02-08 08:35:17Z

1

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.

edited Feb 8, 2017 at 8:35

answered Feb 8, 2017 at 7:50

WitVault

24.2k20 gold badges107 silver badges137 bronze badges

7 Comments

LeCoda Over a year ago

With that loader, 'file', is that the same as file-loader? And I'm guessing SVG and XML are not going to load a PNG file? Thanks for the effort @witvault !!

LeCoda Over a year ago

Unfortunately this is still not loading the PNG file @WitVault

WitVault Over a year ago

@Michael Yes you are right file means file-loader and about url loader I had given just an example. I had given example for loading font specific files. I have updated the answer with image loaders as well. Basically you need to add diff - diff loaders for diff file types

LeCoda Over a year ago

Cheers! Thanks so much again

LeCoda Over a year ago

Got a error at compilation - Module Parse Failed: C://......\Example.png unexpected character '@' (1:0). May need an appropriate loader to handle this file type. :( @WitVault .

|

Collectives™ on Stack Overflow

Can't use local image in react.js

4 Answers 4

2 Comments

Comments

1 Comment

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related