使用 webpack 5.6 从 css 加载图像

Question

我遇到了一个奇怪的问题...我正在尝试完成一些非常简单的事情，正如 Stackoverflow 上的许多答案所建议的那样，但无法使其工作...

我有一个简单的容器，其中包含一个表单、一行和一些列。我想设置我的容器的背景，但它不起作用，图像似乎找不到..

contact_us.tsx

import './contact_us.css';

/* ... */

export class ContactUsContainer extends React.Component<ContactUsContainerProps, ContactUsContainerState> {

    render() {
        return <Container fluid className={`contact-us-form`}>
            <Form>
                <Row className={`justify-content-md-center`}>
                     <Col>{...}</Col>
                     <Col>{...}</Col>
                     <Col>{...}</Col>
                     <Col>{...}</Col>
                </Row>
            </Form>
        </Container>
    }
}

contact_us.css

.contact-us-form {
    height: 75vh;
    background-image: url(/assets/images/backgrounds/background-1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

项目结构是这样的

project
  ...
  src/
    app/
      ...
      containers/
        ...
        contact_us/
          contact_us.tsx
          contact_us.css
    assets/
      css/
      images/
        backgrounds/
          background-1.jpg
    main.tsx

我在尝试打开代码检查中提供的链接时给出以下结果（使用控制台）

打开链接时：

但奇怪的是，当使用“Image”并使用完全相同的文件路径（来自 tsx，而不是 css）设置源时，它可以工作 >

webpack.config.js

const path = require("path");
const webpack = require('webpack');

// variables
let dotenv = require('dotenv').config({path: __dirname + '/.env'});
let sourcePath = path.join(__dirname, './src');
let outPath = path.join(__dirname, './build');
let isDeployedApp = (process.env.REACT_APP_ENVIRONMENT === "staging" || process.env.REACT_APP_ENVIRONMENT === "production");

// plugins
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require('copy-webpack-plugin');

// For our normal CSS files we would like them globally scoped
const cssLoader = {
    loader: 'css-loader',
    options: {
        modules: 'global',
        importLoaders: 2,
        sourceMap: true
    }
};

// To avoid duplicate definition
const styleLoader = isDeployedApp ? {
    loader: MiniCssExtractPlugin.loader,
    options: {
        esModule: false
    }
} : 'style-loader';
const postCSSLoader = {
    loader: 'postcss-loader',
    options: {
        postcssOptions: {
            ident: 'postcss',
            plugins: [
                require('postcss-import')({ addDependencyTo: webpack }),
                require('postcss-url')(),
                require('postcss-reporter')(),
                require('postcss-browser-reporter')({
                    disabled: isDeployedApp
                })
            ]
        }
    }
};

// defining exports
module.exports = {
    context: sourcePath,
    entry: {
        app: './main.tsx',
    },
    output: {
        path: outPath,
        filename: isDeployedApp ? 'bundle.[id].js' : 'bundle.[fullhash].[id].js',
        chunkFilename: isDeployedApp ? 'chunk.[id].js' : 'chunk.[fullhash].[id].js',
        assetModuleFilename: isDeployedApp ? 'assets.[id].[ext]' : 'assets.[fullhash].[id].[ext]'
    },
    target: 'web',
    resolve: {
        extensions: ['.js', '.ts', '.tsx', '.css', '.jpg'],
        // Fix webpack's default behavior to not load packages with jsnext:main module
        // (jsnext:main directs not usually distributable es6 format, but es6 sources)
        mainFields: ['module', 'browser', 'main'],
        alias: {
            app: path.resolve(__dirname, 'src/app/'),
            assets: path.resolve(__dirname, 'src/assets/')
        }
    },
    module: {
        rules: [
            /*
             * Typsecript files.
             */
            {
                test: /\.ts(x?)$/,
                exclude: /node_modules/,
                use: [
                    !isDeployedApp && {
                        loader: 'babel-loader',
                        options: { plugins: ['react-hot-loader/babel'] }
                    },
                    'ts-loader'
                ].filter(Boolean)
            },
            /*
            * JavaScript files.
            */
            {
                enforce: 'pre',
                test: /\.js$/,
                loader: 'source-map-loader'
            },
            /*
            * CSS Files.
            */
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    styleLoader,
                    cssLoader,
                    postCSSLoader
                ]
            },
            /*
            * misc Files.
            */
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.(bmp|mp3|mp4|ogg|wav|eot|ttf|woff|woff2)$/,
                loader: 'file-loader'
            },
            {
                test: /\.(svg|png|jpg|jpeg|gif)$/,
                loader: 'file-loader',
                options: {
                    esModule: false,
                    options: {
                        name: "[path][name].[ext]"
                    }
                }
            }
        ]
    },
    optimization: {
        splitChunks: {
            chunks: 'all',
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/
                }
            }
        },
        minimize: true
    },
    plugins: [
        new webpack.DefinePlugin({
            "process.env": JSON.stringify(dotenv.parsed)
        }),
        new MiniCssExtractPlugin({
            filename: isDeployedApp ? 'styles.[id].css' : 'styles.[fullhash].[id].css'
        }),
        new HtmlWebpackPlugin({
            template: 'assets/index.html',
        })
    ],
    devServer: {
        static: sourcePath,
        hot: true,
        historyApiFallback: {
            disableDotRule: true
        },
        client: {
            logging: 'warn',
        },
    },
    // https://webpack.js.org/configuration/devtool/
    devtool: isDeployedApp ? 'hidden-source-map' : 'eval-cheap-module-source-map'
};

package.json

{
  "name": "project-1",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/core": "^7.16.5",
    "@hot-loader/react-dom": "^17.0.1",
    "@types/node": "^16.11.13",
    "@types/react": "^17.0.37",
    "@types/react-dom": "^17.0.11",
    "@types/react-helmet": "^6.1.4",
    "@types/react-router": "^5.1.17",
    "@types/react-router-dom": "^5.3.2",
    "babel-loader": "^8.2.3",
    "bootstrap": "^5.1.3",
    "copy-webpack-plugin": "^10.1.0",
    "css-loader": "^6.5.1",
    "dotenv": "^10.0.0",
    "file-loader": "^6.2.0",
    "google-protobuf": "^3.19.1",
    "html-loader": "^3.0.1",
    "html-webpack-link-type-plugin": "^1.1.1",
    "html-webpack-plugin": "^5.5.0",
    "jquery": "^3.6.0",
    "mini-css-extract-plugin": "^2.4.5",
    "mobx": "^6.3.8",
    "mobx-persist-store": "^1.0.4",
    "mobx-react": "^7.2.1",
    "mobx-react-router": "^4.1.0",
    "postcss": "^8.4.5",
    "postcss-browser-reporter": "^0.6.0",
    "postcss-import": "^14.0.2",
    "postcss-loader": "^6.2.1",
    "postcss-preset-env": "^7.0.1",
    "postcss-reporter": "^7.0.4",
    "postcss-url": "^10.1.3",
    "prettier": "^2.5.1",
    "react": "^17.0.2",
    "react-bootstrap": "^2.0.3",
    "react-dom": "^17.0.2",
    "react-helmet": "^6.1.0",
    "react-hot-loader": "^4.13.0",
    "react-icons": "^4.3.1",
    "react-multi-carousel": "^2.6.5",
    "react-router": "^6.1.1",
    "react-router-dom": "^6.1.1",
    "source-map-loader": "^3.0.0",
    "style-loader": "^3.3.1",
    "ts-loader": "^9.2.6",
    "typescript": "^4.5.4",
    "url-loader": "^4.1.1",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.6.0",
    "webpack-hot-middleware": "^2.25.1"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.16.5",
    "@babel/plugin-proposal-decorators": "^7.16.5"
  },
  "scripts": {
    "eject": "react-scripts eject",
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve --mode=development --hot --progress --port 3000 --open",
    "build": "webpack --progress --mode production",
    "prettier": "prettier --write \"src/**/*.{ts,tsx,css}\""
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

我很确定问题出在 webpack 上，但在过去 3 小时内我找不到任何解决方案：/ 任何帮助都非常受欢迎......谢谢！

最大

Answer 1

我不认为它没有加载，因为 webpack 有问题。您错过了背景图像中图像 URL 的双引号或单引号

我看不到您的文件和文件夹结构。根据我的假设检查下面的代码。希望这会奏效

.contact-us-form {
height: 75vh;
background-image: URL("../assets/images/backgrounds/background-1.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;}