リアクションはローカル画像をロードしません

Question

私は小さな反応アプリを構築していて、ローカル画像はロードされません。 placehold.it/200x200のような画像が読み込まれます。私はそれがサーバーで何かできるかもしれないと思った？ githubの完全な情報源。

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画像に必要ここ

は私の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ですWebpackがそれらを処理するために、内部画像は外部画像にロードされる理由を説明するので、の代わりにimage-name.png wの代わりに<img src={require('/images/image-name.png')} />を使用する必要があります。それぞれの正しい画像。そうすれば、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：バイト制限インラインファイルには、Data URLとして

あなたは両方モジュールをインストールする必要があります。url-loaderとfile-loader

は最後に、あなたが行うことができます：

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

をこれらのローダーについてさらに詳しく調べることができます：

のurl-ローダー：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}`} /> 

このように、コードがコンパイルされるときに正しいパスが挿入されています。