Webpack 文件加载器未加载图像，404 错误答案

【问题标题】：Webpack file-loader not loading images, 404 errorWebpack 文件加载器未加载图像，404 错误
【发布时间】：2019-08-05 19:11:26
【问题描述】：

我正在开发一个同样使用 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

【问题讨论】：

标签： javascript reactjs spring-boot webpack webpack-file-loader

【解决方案1】：

我的猜测是您的 HTML 页面指的是 ./built/bundle.js，这是相对于 Spring 静态资源目录的 React App 的路径。 Webpack 会将图像文件输出到与bundle.js 相同的位置（...../static/built/imagehash.png），并带有您所说的哈希。当 React App 引用图像时，它将使用相对路径，例如 imagehash.png，假设它位于同一目录中。但是当 Spring 看到该路径时，它将寻找 static/imagehash.png（和其他静态资源位置）。 IE。它不知道在static/built/ 目录中查找。

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

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

【讨论】：