我正在构建一个小型React应用,并且我的本地图像无法加载。图像像placehold.it/200x200负载。我以为这可能与服务器有关?
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。
require
<img src={"/images/resto.png"} />
<img src={require('/images/image-name.png')} />