Can’t use local image in react.js

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;

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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.

enter image description here

Method 2

This works for me

import Img from './Example.png'

then in your img tag
<img src = {Img} />

Method 3

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

Method 4

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.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x