React不会加载本地图像

Question

我正在构建一个小型React应用，并且我的本地图像无法加载。图片如placehold.it/200x200加载。我以为这可能与服务器有关？完整的源代码在github上。

这是我的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');

});

Answer 1

使用Webpack时，您需要对require图像进行处理，以便Webpack处理它们，这可以解释为什么外部图像不加载而内部图像加载的原因，因此，<img src={"/images/resto.png"} />您无需<img src={require('/images/image-name.png')} />为每个图像使用正确的图像名称替换image-name.png。这样，Webpack就能处理和替换源img。