[解決済み] Reactがローカルの画像を読み込まない

質問

小さなリアクトアプリを作っているのですが、ローカルの画像が読み込まれません。以下のような画像です。 placehold.it/200x200 が読み込まれます。私は多分それがサーバーに何かである可能性があると思いましたか？

以下は私の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">
                        <h1>foo</h1>
                    </div>
                    <div className="home-arrow">
                        <p className="arrow-text">
                            Vzdělání
                        </p>
                        <img src={"/images/resto.png"} />
                    </div>
                </div>
            </div>
        );
    }
}

export default App;

index.jsです。

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();

render(
    <Router history={history} >
        <Route path="/" component={App} >
            <Route path="vzdelani" component="" />
            <Route path="znalosti" component="" />
            <Route path="prace" component="" />
            <Route path="kontakt" component="" />
        </Route>
        <Route path="*" component="" />
    </Router>,
    document.getElementById('app')
);

とserver.jsで構成されています。

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

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

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

app.use(require('webpack-hot-middleware')(compiler));

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

app.listen(3000, 'localhost', function(err) {
  if (err) {
    console.log(err);
    return;
  }

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

解決方法は？

Webpackを使用する場合、次のようにする必要があります。 require の画像は Webpack で処理されるため、外部画像は読み込まれるが内部画像は読み込まれないということが起こります。 <img src={"/images/resto.png"} /> を使用する必要があります。 <img src={require('/images/image-name.png')} /> は、それぞれ image-name.png を正しい画像名に置き換えてください。そうすることで、Webpackはソースのimgを処理し、置き換えることができるようになります。