React won’t load local images

I am building a small react app and my local images won’t load. Images like loads. I thought maybe it could be something with the server?

Here is my App.js

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div className="home-container">
                <div className="home-content">
                    <div className="home-text">
                    <div className="home-arrow">
                        <p className="arrow-text">
                        <img src={"/images/resto.png"} />

export default App;


import React, { Component } from 'react';
import { render } from 'react-dom';
import { Router, Route, Link } from 'react-router';
import { createHistory } from 'history';
import App from './components/app';

let history = createHistory();

    <Router history={history} >
        <Route path="/" component={App} >
            <Route path="vzdelani" component="" />
            <Route path="znalosti" component="" />
            <Route path="prace" component="" />
            <Route path="kontakt" component="" />
        <Route path="*" component="" />

and server.js:

var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./');

var app = express();
var compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath


app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, 'index.html'));

app.listen(3000, 'localhost', function(err) {
  if (err) {

  console.log('Listening at http://localhost:3000');


When using Webpack you need to require images in order for Webpack to process them, which would explain why external images load while internal do not, so instead of <img src={"/images/resto.png"} /> you need to use <img src={require('/images/image-name.png')} /> replacing image-name.png with the correct image name for each of them. That way Webpack is able to process and replace the source img.

Leave a Reply

Your email address will not be published. Required fields are marked *