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

问题描述

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;

我在name ->中添加了一个publicPathwithimages/和 remove 。这将起作用，但它会将图像添加到 dist 文件夹下的图像文件夹之外，因此它位于我的. 我想保留我的图像只是为了组织但由于项目/图像而出现 GET 错误，它应该是图像/看板.....file-loaderimages/bundle.jsdist/images

我是 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 似乎没有找到，所以看起来这是一个配置/路径问题。

标签： javascriptreactjswebpack

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

问题描述

解决方案

推荐阅读