ฉันกำลังสร้างแอปตอบสนองขนาดเล็กและรูปภาพในเครื่องของฉันไม่โหลด ภาพเหมือน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;
ดัชนี 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');
});
4
โดยทั่วไปหมายความว่าเว็บเซิร์ฟเวอร์ภายในของคุณไม่ได้ให้บริการรูปภาพหรือ URL ที่คุณระบุไม่ถูกต้อง เปิดคอนโซลเบราว์เซอร์ของคุณและตรวจสอบว่าคุณได้รับข้อผิดพลาดหรือไม่เช่นไม่พบ 404
—
Mario Tacke
คน! เพียงแค่ใช้
—
Neeraj Sewani
require(). เช่น src = {ต้องใช้ ("image path")}
เพียงแค่ใช้ require () = src = {require ("image path")}
—
xAtifx
