React/Webpack - 由于路径错误而无法加载图像答案

【问题标题】：React/Webpack - Image not loading due to wrong pathReact/Webpack - 由于路径错误而无法加载图像
【发布时间】：2018-08-27 23:01:09
【问题描述】：

在 webpack 加载我的图片时遇到了一点麻烦。我收到此错误：

GET http://localhost:1234/projects/images/KanbanCard0-70090cba.png 404 (Not Found)

我知道那不是路径，如果我取出projects，那么它将是localhost:1234/images/Kan...，然后图像将加载。

这是我的树文件夹：

这是我的组件：

import React, { Component} from "react";
import kanban2 from '../../images/KanbanCard0.png';

class Kanban extends Component {
    render(){
        console.log(this.props)
        return(
            <div className="introWrapper">
                <h2>kanban page</h2>
                <a onClick={this.props.history.goBack}>Back</a>
                <img src={kanban2} />

            </div>
        );
    }
}

export default Kanban;

Webpack.config 文件

const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin')

process.env.NODE_ENV = process.env.NODE_ENV || 'development';

const config = {
    entry:  __dirname + '/js/index.jsx',
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js',
        // publicPath: '/projects/'
    },
    resolve: {
        extensions: ['.js', '.jsx', '.css']
    },
    module: {
      rules: [
        {
          test: /\.jsx?/,
          exclude: /node_modules/,
          use: 'babel-loader'
        },
        {
          test: /\.scss?/,
          loader: 'style-loader!css-loader!sass-loader' 
        },
        {
          test: /\.(png|jpg|gif)$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: 'images/[name]-[hash:8].[ext]'
              }
            }
          ]
        }
      ]
    },
    plugins: [
        new CopyWebpackPlugin([
            { from: './index.html', to: './index.html' }
        ])
    ],
    devServer: {
      publicPath: '/',
      contentBase: __dirname + '/dist',
      port: 1234,
      historyApiFallback: {
            index: 'index.html'
      }
    }
};
module.exports = config;

我添加了 publicPath 和 images/ 并删除了 file-loader 名称 -> images/。这将起作用，但它会将图像添加到 dist 文件夹下的图像文件夹之外，因此它位于我的 bundle.js 旁边。我想将我的图像保留在dist/images 下只是为了进行组织，但由于项目/图像而出现 GET 错误，它应该是图像/看板.....

我是 webpack/react 的新手，谁能帮忙解决这个问题？您的帮助将不胜感激！

注意：

所以项目一词在错误 url -> GET http://localhost:1234/projects/images/KanbanCard0-70090cba.png 404 (Not Found) 中。因为我在这个页面下，我想加载我的图像：http://localhost:1234/projects/kanban_board。我确实知道该图像在此路径下-> http://localhost:1234/images/KanbanCard0-70090cba.png。只是 webpack 好像没有找到，所以看起来是配置/路径问题。

【问题讨论】：

标签： javascript reactjs webpack

【解决方案1】：

发现了我的问题，只需要在名称中添加一个斜杠即可：

options: {
                name: '/images/[name]-[hash:8].[ext]'
              }

【讨论】：