从文件加载器加载图像时出错

Question

我从不同路线获取相同的捆绑图像时遇到错误

我的应用程序在路线http://localhost:8080

中

我的图片从网址http://localhost:8080/3e8b0bc82f581817994bbe9e9396170b.jpg

完美加载

但是当我的应用路线更改为http://localhost:8080/dashboard

时

我的图片也会从网址http://localhost:8080/dashboard/3e8b0bc82f581817994bbe9e9396170b.jpg

加载

由于图片位于网址http://localhost:8080/3e8b0bc82f581817994bbe9e9396170b.jpg  因此，从给定位置获取资源时会显示404 resource not found错误。

我正在使用require('../image.jpg')在我的应用中添加图片。

这是我的webpack.config.js文件。

＆＃13;

＆＃13;

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      loader: 'babel-loader',
      exclude: /node_modules/,
      query: {
        presets: ['es2015', 'react',  "env"]
      }
     },
      { test: /\.(png|jpg|svg)$/i, loader: "file-loader",
        options:{outputPath:'images/'}},
      {test:/\.json?$/,loader:'json-loader'}
  
    ],
    
  },
devServer: {
    historyApiFallback: true,
    contentBase: './public',
    hot:true
  },
devtool:"cheap-module-eval-source-map"

}

＆＃13;

＆＃13;

＆＃13;

我正在使用webpack版本：＆＃34; ^ 3.1.0＆＃34;。