使用带有 React 和 Django 的 webpack 加载程序 URL 时找不到图像文件

Question

我正在努力使用 React 组件中的 img-tag 加载图像。基本上我使用 webpack 的 url 加载器来加载图像并添加哈希（以避免以后的缓存问题）。当运行 "npm run dev" 时，将创建包并在指定的子文件夹 "images" 中创建图像文件。但是，Chrome 找不到图像并给我以下错误：

GET http://localhost:8000/images/49b281dc3f9e139385f943c7e3f918b1-git.jpeg 404 (Not Found)

更具体：包 "main.js" 是在前端文件夹中创建的（如 index.html 中所示），并且有一个子文件夹 "images"，其中包含由 URL 装载机：49b281dc3f9e139385f943c7e3f918b1-git.jpeg

我尝试使用 css 加载图像，效果很好（即显示在浏览器中），但是在这种情况下似乎没有使用 url-loader，因为哈希没有被添加并且文件从原始位置而不是包的位置加载。

我看到了另一个关于该主题的帖子 () but cannot see how publicpath should be of help for my case. The problem might also be related with my setup with Django: I have put a frontend app into the Django project, where all the React stuff resides (following this tutorial:https://www.youtube.com/watch?v=GieYIzvdt2U and its source code: https://github.com/bradtraversy/lead_manager_react_django)

这是webpack.config.js

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /.*\.(gif|png|jpe?g)$/i,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                        limit: 8000,
                        name: 'images/[hash]-[name].[ext]'
                    },
                  },
                ]
            }
        ]
    }
};

这是index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">
    <title>Title</title>
</head>
<body>
    <div id="app"></div>
    {% load static %}
    <script src="{% static "frontend/main.js" %}"></script>
    <link rel="stylesheet" href="{% static 'css/styles.css' %}">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

React 组件MainHeader.js

import React, {Component} from 'react';
import logo from '../../../static/img/git.jpeg';

class MainHeader extends Component {
    render() {
        return (

            <div className="container">
                <nav className="navbar navbar-expand-sm navbar-light">
                    <img src={logo} className="img-fluid" alt="Logo" width={800} height={800}/>
                    <a className="navbar-brand" href="#">Title</a>
                    <button className="navbar-toggler" type="button" data-toggle="collapse"
                            data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                            aria-expanded="false" aria-label="Toggle navigation">
                        <span className="navbar-toggler-icon"></span>
                    </button>

                    <div className="collapse navbar-collapse d-flex justify-content-end" id="navbarSupportedContent">
                        <ul className="navbar-nav">
                            <li className="nav-item active">
                                <a className="nav-link" href="#">Welcome, customer!<span className="sr-only">(current)</span></a>
                            </li>
                            <li className="nav-item dropdown">
                                <a className="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                                   data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Dropdown
                                </a>
                                <div className="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <a className="dropdown-item" href="#">Action</a>
                                    <a className="dropdown-item" href="#">Another action</a>
                                    <div className="dropdown-divider"></div>
                                    <a className="dropdown-item" href="#">Something else here</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        );
    }
}

export default MainHeader;

我的App.js:

import React, { Component } from 'react';
import { Fragment } from 'react';
import ReactDOM from 'react-dom';

import Header from './layout/Header';
import Dashboard from './analytics/Dashboard';
import MainHeader from "./layout/MainHeader";

class App extends Component {
    render() {
        return (
            <Fragment>
                <MainHeader/>
                <Header />
                <div className="container">
                    <Dashboard/>
                </div>

            </Fragment>

        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'));

这些是我在 Django settings.py 中的静态文件设置：

STATIC_ROOT = os.path.join(BASE_DIR, "..", "www", "static")
STATIC_URL = '/static/'

Answer 1

我在 Django 设置中尝试了一些更改，但其中 none 使应用程序查看图像文件所在的文件夹 (http://localhost:8000/static/frontend/images/)

最后，唯一成功的是将以下内容添加到 webpack.config.js

output: {
    filename: "main.js",
    publicPath: "/static/frontend/"
},

使用带有 React 和 Django 的 webpack 加载程序 URL 时找不到图像文件

Image file cannot be found when using URL loader of webpack with React & Django

javascript

django

reactjs

webpack

urlloader