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 App相对于Spring静态资源目录的路径。 Webpack会将图像文件输出到与...../static/built/imagehash.png相同的位置（bundle.js），并带有您所说的哈希值。当React App引用图像时，它将使用相对路径，例如imagehash.png，假设它位于同一目录中。但是当Spring看到该路径时，它将寻找static/imagehash.png（以及其他静态资源位置）。就是它不知道要查看static/built/目录。

您可以使用publicPath选项告诉文件加载器在哪里引用Web服务器上的图像。像这样：

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

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

1 个答案: