webpack 文件加载器不加载背景图片已解决答案

【问题标题】：webpack file-loader does not load background image SOLVEDwebpack 文件加载器不加载背景图片已解决
【发布时间】：2021-10-05 02:34:49
【问题描述】：

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

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

///////编辑

我添加了绝对 paht，但它仍然无法正常工作。获取图像是因为如果不是，我会收到错误，所以我认为这不是路径问题。我更新了 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>
    )
}

Scss 组件

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;

Scss 组件

.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: false 放在 url-loader 选项中，图像就会被加载。

【问题讨论】：

看起来可能是该背景图像的相对 URL 路径存在问题。能不能把图片url改成绝对路径，看看背景是否渲染？
我在我的 webpack 文件中添加了绝对路径，并以这种方式在我的 scss 文件中导入图像，但它仍然不起作用。我尝试导入我的资产文件夹中不存在的随机图像，但出现错误，因此路径本身可以正常工作，并且我正在寻找的图像被调用。我不相信这是一个路径问题，因为我的理论是加载器由于某种原因没有得到那个 bakground 图像。不过还是谢谢你的建议！
我也有同样的问题。你找到解决办法了吗？
不，我尝试了互联网上使用这两个加载器的每个版本，但没有一个显示背景图像。我知道图像被调用并且路径是正确的，但由于某种原因，样式没有得到应用

标签： reactjs image webpack sass loader

【解决方案1】：

在 url-loader 选项中添加 esModule: false 图像对我有帮助，虽然我不知道为什么，如果有人遇到同样的问题，你应该试试这个技巧。

【讨论】：

【解决方案2】：

这对我有用https://webpack.js.org/guides/asset-management/。您需要已经设置了css-loader。这不是使用file-loader 或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'

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

【讨论】：