React不会加载本地图像

Question

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

Answer 1

使用的WebPack需要require图像，以便为了Webpack来处理它们，这可以解释为什么外部图像加载而内部不加载，所以而不是<img src={"/images/resto.png"} />您需要使用<img src={require('/images/image-name.png')} />替换image-name.png w。他们每个人的正确形象。这样Webpack就能够处理和替换源img。

Answer 2

尝试在server.js改变代码 -

app.use(require('webpack-dev-middleware')(compiler, { 
     noInfo: true, 
     publicPath: config.output.path 
    })); 

Answer 3

另一种方式来做到：

首先，安装这些模块：url-loader，file-loader

使用NPM：npm install --save-dev url-loader file-loader

接下来，将其添加到您的Webpack配置中：

module: { 
    loaders: [ 
     { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' } 
    ] 
    } 

limit：字节的限制内联文件数据URL

您需要安装都模块：url-loader和file-loader

最后，你可以这样做：

<img src={require('./my-path/images/my-image.png')}/> 

您可以在这里进一步调查这些装载机：

网址装载机：https://www.npmjs.com/package/url-loader

文件装载机：https://www.npmjs.com/package/file-loader

Answer 4

我开始建设我的应用程序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; 

这对我来说非常合适。这里有一个link to the master doc for that README，这也解释了（节选）：

...You can import a file right in a JavaScript module. This tells Webpack to include that file in the bundle. Unlike CSS imports, importing a file gives you a string value. This value is the final path you can reference in your code, e.g. as the src attribute of an image or the href of a link to a PDF.

To reduce the number of requests to the server, importing images that are less than 10,000 bytes returns a data URI instead of a path. This applies to the following file extensions: bmp, gif, jpg, jpeg, and png...

Answer 5

什么工作对我来说是插入反引号和$ {}之间的路径。因此，例如，而不是：

<img src={require("../images/resto.png")} /> 

使用：

<img src={require(`${../images/resto.png}`} /> 

这样，当代码编译正确的路径插入。