javascript - Webpack 文件加载器未加载图像，404 错误

Question

我正在开发一个也使用 webpack 的 SpringBoot/React 项目。我只是想渲染项目中本地存储的图像。我尝试无休止地使用 npm 的文件加载器，但没有成功。每当我运行该应用程序时，我尝试加载的图像都会出现 404 错误。

我也尝试过使用 url-loader 和 image-webpack-loader，但两者也会导致 404 错误。

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/main/js/index.js',
  devtool: 'sourcemaps',
  cache: true,
  debug: true,
  output: {
    path: __dirname,
    filename: './src/main/resources/static/built/bundle.js',
  },
  module: {
    loaders: [
      {
        test: path.join(__dirname, '.'),
        exclude: /(node_modules)/,
        loader: 'babel',
        query: {
          cacheDirectory: true,
          presets: ['es2015', 'react'],
        },
      },
      {
        test: /\.css$/,
        loaders: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        loader: 'file-loader',
      },
    ],
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader', 'eslint-loader'],
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'img/[hash]-[name].[ext]',
            },
          },
        ],
      },
    ],
  },
};

header.js

import './css/header-style.css';
import React from 'react';
import Logout from './Logout';
import { Link } from 'react-router-dom';

import logo from './img/Logo.png'; // The image I'm trying to load.

/**
 * Renders Logo, header navigation links to other pages, and the logout component.
 */
function Header() {
  return (
    <div className="row wrapper-header">
      <nav className="navbar navbar-expand-lg">
        <a className="navbar-brand" href="#">
          <img className="logo-width" alt="Logo" src={logo} />
        ...

项目结构

+-- ProjectFolder
|   +-- src
|      +-- main
|          +-- js
|              +-- img
|                  +-- Logo.png
|              +-- header.js
|
|   +-- f5c281d45d55b24ed52c9fee3077f36e.png

当我运行 webpack 时，我可以看到它发出带有哈希值的 png，如下所示:在 ProjectFolder 根目录中 f5c281d45d55b24ed52c9fee3077f36e.png

Answer 1

我的猜测是，您的 HTML 页面引用的是 ./built/bundle.js，即 React 应用程序相对于 Spring 静态资源目录的路径。Webpack 会将图像文件输出到与 bundle.js 相同的位置 (...../static/built/imagehash.png)，并具有像您一样的哈希值说。当React应用程序引用图像时，它将使用相对路径，例如imagehash.png，假设它位于同一目录中。但是，当 Spring 看到该路径时，它将查找 static/imagehash.png(以及其他静态资源位置)。 IE。它不知道在 static/built/ 目录中查找。

您可以使用 publicPath 选项告诉文件加载器从 Web 服务器上的何处引用图像。像这样:

        {
            test: /\.(png|svg|jpg|gif)$/,
            loader: 'file-loader',
            options: {
                publicPath: 'built'
            }
        }