画像が反応してブラウザに読み込まれず、ウェブパックで表現されています

Question

私は反応のサイト構築に取り組んでいます。明示的に実装するまでうまくいきました。 Expressの実装後、私はいくつかのリソース、特にブラウザの画像を読み込めません。画像のパスは正しく表示されていますが、画像はブラウザに表示されません。

webpack.config.jsは次のとおりです。

var path = require('path'); 
var webpack = require('webpack'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
const ExtractTextPlugin = require("extract-text-webpack-plugin"); 

module.exports = { 
    devtool: 'eval-source-map', 
    entry: [ 
    'webpack-hot-middleware/client?reload=true', 
    path.join(__dirname, 'app/index.js') 
    ], 
    output: { 
    path: path.join(__dirname, '/dist/'), 
    filename: '[name].js', 
    publicPath: '/' 
    }, 
    plugins: [ 
    new ExtractTextPlugin('/bundle.css', { allChunks: true }), 
    new HtmlWebpackPlugin({ 
     template: 'app/index.html', 
     inject: 'body', 
     filename: 'index.html' 
    }), 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin(), 
    new webpack.DefinePlugin({ 
     'process.env.NODE_ENV': JSON.stringify('production') 
    }) 
    ], 
    resolve: { 
    extensions: ['', '.scss', '.css', '.js', '.json'], 
    modulesDirectories: [ 
     'node_modules', 
     path.resolve(__dirname, './node_modules') 
    ] 
    }, 
    module: { 
    loaders: [{ 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel', 
     query: { 
     "presets": ["react", "es2015", "stage-0", "react-hmre"] 
     } 
    }, { 
     test: /\.json?$/, 
     loader: 'json' 
    }, { 
     test: /\.scss$/, 
     loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass') 
    }, { 
     test: /\.css$/, 
     loader: 'style-loader!css-loader' 
    },{ 
     test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/, 
     loader: "url-loader?limit=10000" 
    },{ 
     test: /\.less$/, loader: "style-loader!css-loader!less-loader" 
    },{ 
     test: /\.(ttf|eot|svg|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
     loader: "file-loader" 
    }] 
    } 
}; 

server.jsファイルの内容は次のとおりです。次のように

const path = require("path"); 
const express = require("express"); 
const webpack = require("webpack"); 
const webpackDevMiddleware = require("webpack-dev-middleware"); 
const webpackHotMiddleware = require("webpack-hot-middleware"); 
const config = require("./webpack.config.js"); 

const app   = express(), 
     DIST_DIR  = path.join(__dirname, "dist"), 
     HTML_FILE  = path.join(DIST_DIR, "index.html"), 
     isDevelopment = process.env.NODE_ENV !== "production", 
     DEFAULT_PORT = 3000, 
     compiler  = webpack(config); 

app.set("port", process.env.PORT || DEFAULT_PORT); 

if (isDevelopment) { 
    app.use(webpackDevMiddleware(compiler, { 
     publicPath: config.output.publicPath 
    })); 

    app.use(webpackHotMiddleware(compiler)); 

    app.get("*", (req, res, next) => { 
     compiler.outputFileSystem.readFile(HTML_FILE, (err, result) => { 
      if (err) { 
       return next(err); 
      } 
      res.set('content-type', 'text/html'); 
      res.send(result); 
      res.end(); 
     }); 
    }); 
} 

else { 
    app.use(express.static(DIST_DIR)); 

    app.get("*", (req, res) => res.sendFile(HTML_FILE)); 
} 

app.listen(app.get("port")); 

package.jsonは次のとおりです。

"main": "server.js", 
    "script": { 
    "start": "babel-node server-es6.js", 
    "build:server": "babel server-es6.js --out-file server.js", 
    "build:client": "webpack -p --config webpack.config.js --progress" 
    }, 

サイトをロードしているが、いくつかのCSSがロードされていません。コンソールエラーをスロー：

GET http://bundle.css/ net::ERR_NAME_NOT_RESOLVED

イメージパスはhttp://localhost:3000/img/img1.pngとして正しくてくるが、それはブラウザに表示されないです。私は問題がwebpack公共パスであると思う。

私は<img src={require('/images/image-name.png')} />、その作業罰金を使用しています。しかし、私はそれが非常に重いコードベースであり、また私はそれが良い解決策ではないと思うので、それをしたくありません。

私はwebpack-express-boilerplateからの助けをとっています。クロムネットワークツールで

、画像タイプがtext/htmlとして来ています。

Answer 1

ファイルのパスが静的である場合は、一度ファイルをインポートして、SRC

import image from '/path/to/images/image-name.png'; 
... 
<img src={image} />