Question

使用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的新手，有人可以帮助解决此问题吗？您的帮助将不胜感激！

注意：

所以单词project在错误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似乎找不到，所以看起来这是一个配置/路径问题。

Answer 1

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

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

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

1 个答案: