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

Question

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

当我的应用程序在路由中时http://localhost:8080

我的图片从 url 完美加载http://localhost:8080/3e8b0bc82f581817994bbe9e9396170b.jpg

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

我的图片也从 url 加载http://localhost:8080/dashboard/3e8b0bc82f581817994bbe9e9396170b.jpg

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

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

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

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"

}

我正在使用 webpack 版本：“^3.1.0”。