React不会加载本地图像

我正在构建一个小型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');
});
Harry逆天Eva2020/03/12 15:48:56

有时您可以输入而不是在图像位置/ src中输入:try

./assets/images/picture.jpg

代替

../assets/images/picture.jpg
斯丁2020/03/12 15:48:56
src={"/images/resto.png"}

以这种方式使用src属性意味着,将从您站点的绝对路径“ /images/resto.png”加载您的图像。图片目录应位于网站的根目录。范例:http : //www.example.com/images/resto.png

GilTom神乐2020/03/12 15:48:56

我也想补充@Hawkeye Parker和@Kiszuriwalilibori的答案:

正如从文档指出这里时,它通常是最好的,因为需要导入的图像。

但是,由于文件中的以下建议,我需要动态加载许多文件,这导致我将图像放入公用文件夹(也在README中进行了说明):

通常,我们建议从JavaScript导入样式表,图像和字体。公用文件夹在许多不常见的情况下可用作解决方法:

  • 您需要在构建输出中具有特定名称的文件,例如manifest.webmanifest。
  • 您有成千上万张图像,并且需要动态引用它们的路径。
  • 您想在捆绑的代码之外包括一个小脚本,例如expap.js。
  • 某些库可能与Webpack不兼容,您别无选择,只能将其作为标签包含在内。

希望对别人有帮助!如果需要清除其中的任何内容,请给我留言。