我正在构建一个小型反应应用程序,我的本地图像不会加载。像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')} />