webpack 文件加载器不加载背景图像

Question

我遇到这个问题已经有一段时间了，我看到其他人也有这个问题，但即使我有与他们相同的代码，它仍然无法工作，我不知道我做错了什么。我正在使用 React、Webpack、babel 和 scss 来完成一个项目。首先，我创建了一个主组件，其中加载的背景图像没有问题，但是当我添加轮播组件时，出现错误，提示我需要一个加载器来显示图像（html 图像，而不是 bakground）。所以我在互联网上查找了它，出现了两个加载器：url-loader 和 file-loader，我安装了这两个加载器，并按照文档中所述在我的 webpack 配置文件中添加了一个。图像已加载，但主组件的背景图像未加载，不仅如此，背景的所有样式也不适用。

这是我的 webpack 配置文件，我尝试放置两个加载器，然后只放置一个，然后另一个，但它们都不起作用。我尝试了 stackoverflow 上遇到的所有解决方案，但代码无法正常工作，并且我的终端中没有错误。

///////编辑

我添加了绝对路径，但它仍然不起作用。图像被获取，因为如果不是，我会收到错误，所以我不认为这是路径问题。我更新了 webpack 配置文件

const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require("path");
const htmlPlugin = new HtmlWebPackPlugin({
 template: "./src/index.html",
 filename: "./index.html"
});




module.exports = {
mode: "development",
resolve: {
  alias: {
    Assets: path.resolve(__dirname, 'src/assets/')
  }
},
  module: {
    rules: [{
   test: /\.js$/,
   exclude: /node_modules/,
   use: {
     loader: "babel-loader"
   }
 },
  {
   test: /\.s?css$/,
   use: ["style-loader", "css-loader", "sass-loader"]
  },
  {
    test: /\.(png|jpg|gif)$/i,
    use: [
      {
        loader: 'url-loader',
        options: {
          limit: 10000,
          esModule: false
        },
      },
    ]
  }
]},
 plugins: [htmlPlugin],
 devServer:{
   historyApiFallback : true
 }
}

这是我的主要组件及其 scss 文件（bakground 图像所在的位置）

反应组件

import React from "react";
import { NavBar } from "../components/NavBar";
import CarouselComponent from "../components/Carousel";

export const MainPage = () => {
    return (
        <div>
        <NavBar />
        <div>
            <div className="main">
                <h1>Find a new musical to watch!</h1>
                <a className="main__btn" href="/musicals">See categories</a>
            </div>
            <div className="login-info">
                <h2 className= "login-info__login">See our forum for reacomendations and post your own!</h2>
                <div className="login-info__btn-login-position">
                    <a className="btn login-btn-position-config" href="#"><strong>Loging</strong></a>   
                </div>
                <span></span>
                <h2 className= "login-info__create-account">Don't have an account? Create one!</h2>
                <div className="login-info__btn-create-position">
                <   a className="btn login-btn-position-config" href="#"><strong>Create account</strong></a> 
                </div>
           </div>
            <CarouselComponent />
        </div>
        </div>
    )
}

CSS组件

body{ 
    padding: 56px 50px 0 50px;
    background-color: $color-background;
}


.main{
    font-family: $primary-title-font;
    height: 90%;
    background: url(Assets/main_background.jpg) no-repeat center center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    
    h1{
        background-image: linear-gradient(90deg, rgba(1,50,1,1) 5%, rgba(70,82,25,1) 51%, rgba(78,82,29,1) 87%);
        background-size: 100%; 
        background-clip: text;
        -webkit-background-clip: text;
        -moz-background-clip: text;
        -webkit-text-fill-color: transparent; 
        -moz-text-fill-color: transparent;
        position: absolute;
        top: 15rem;
        left: 5rem;
        font-size: 5rem;
        
    }

    &__btn{ 
        position: absolute; 
        top: 350px;
        left: 459px;
        border-radius: 10% / 20%;
        padding: 1rem;
        text-decoration: none;
        color: $primary-black-color;
        background: $golden-button;
        font-size: 1.5rem;

        &:hover{
            color: $primary-black-color;
        }

        &:active{
            transform: translateY(2px);
        }
    }
}

这是带有 scss 的轮播组件

反应组件

import React, { Component } from "react";
import "react-responsive-carousel/lib/styles/carousel.min.css"; 
import { Carousel } from 'react-responsive-carousel';
import hamilton from "../assets/hamilton.jpg";
import six from "../assets/six_the_musical.jpg";
import hadestown from "../assets/hadestown.jpg";
import theGuy from "../assets/the_guy_who_didnt_like_musicals.png";

class CarouselComponent extends Component {
    render (){
        return (
            <Carousel autoPlay = {true} infiniteLoop={true} interval={4000} showStatus={false} useKeyboardArrows={true} showThumbs={false}>
                <div className="carousel__box-1">
                    <img src={hamilton} alt="Hamilton wallpaper"/>
                </div>
                <div className="carousel__box-2">
                    <img src={six} alt="Six wallpaper"/>
                </div>
                <div className="carousel__box-3">
                    <img src={hadestown} alt="Hadestown wallpaper"/>
                </div>
                <div className="carousel__box-4">
                    <img src={theGuy} alt="The guy who didnt like musicals wallpaper"/>
                </div>
            </Carousel>
        )
    }
}

export default CarouselComponent;

CSS组件

.carousel__box{
    height: 9rem;

    img{
        min-width: 100%;
        min-height: 100%;
    }
}

如果有必要，我还会添加我的文件夹结构

/project
  /dist
  /node_modules
  /src
    /assets
       (all the images are stored here)
    /components
       card.js
       cardBlock.js
       carousel.js
       navbar.js
    /pages
       main.js
       musicals.js
       notFound.js
    /sass
       (all scss are stored here, there is a styles.scss that imports the rest of files and it's 
       called in index.js)
    index.html
    index.js (imports all react component an renders them in index.html)
    .babelrc
    packaje.json
    packaje-lock.json
    webpack.config.js

////// 新编辑

我发现如果你放入esModule: falseurl-loader 选项，图像就会被加载。

Answer 1

这对我有用https://webpack.js.org/guides/asset-management/。您需要css-loader已经设置。这不是使用file-loaderor url-loader，因此请注意其含义，但这是 Webpack 推荐的一个简单解决方案。我删除了设置file-loader并更新为：

{
  test: /\.(png|svg|jpg|jpeg|gif)$/i,
  type: 'asset/resource',
},

解释是这样的：

当使用 css-loader 时，如上所示，CSS 中的 url('./my-image.png') 也会发生类似的过程。加载程序将识别这是本地文件，并替换“./my-image.png”

这对我来说非常有效，所以希望它有帮助。

Answer 2

如果你有 webpack 5，那么就不要安装（file-loader、url-loader、raw-loader），它们随 5 一起提供。一切都会正常，只需将图像包含在 css 文件中，就像没有 webpack 一样。

https://webpack.js.org/guides/asset-modules/