React 不会加载本地图像

Question

我正在构建一个小型反应应用程序，我的本地图像不会加载。加载诸如 placehold.it/200x200 lacehold.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');
});

原文由 Petrba 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 Thomas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我开始使用 create-react-app 构建我的应用程序（请参阅“创建新应用程序”选项卡）。它附带的 README.md 给出了这个例子：

 import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image

console.log(logo); // /logo.84287d09.png

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}

export default Header;

这对我来说非常有效。这是 该 README 的主文档的链接，其中解释了（摘录）：

…您可以直接在 JavaScript 模块中导入文件。这告诉 Webpack 将该文件包含在包中。与 CSS 导入不同，导入文件会为您提供一个字符串值。该值是您可以在代码中引用的最终路径，例如作为图像的 src 属性或指向 PDF 的链接的 href。

为了减少对服务器的请求数，导入小于 10,000 字节的图像将返回数据 URI 而不是路径。这适用于以下文件扩展名：bmp、gif、jpg、jpeg 和 png…

原文由 Hawkeye Parker 发布，翻译遵循 CC BY-SA 3.0 许可协议