背景图像 URL 未使用 Webpack 加载

Question

基本上我试图在容器的背景中显示图像，但它没有加载。我尝试了各种路径，因为我并不完全清楚 URL 需要相对于什么： the package.json、 the webpack.config.js、 React 组件或login.scss我正在使用的。

\n\n

除了以下内容之外，我还将提供目录结构webpack.config.js：

\n\n

/app\n    /src\n        /assets\n            /img\n                slide_blue.png\n            /scss\n                login.scss\n        /config\n            webpack.config.js\n        /react\n            /containers\n                /authentication\n                    signin.js\n            index.js // entry point\n    package.json\n

\n\n

login.scss到目前为止，它很短，其他样式也有效：

\n\n

// logic.scss\n@import \'declarations\';\n\n.login {\n    height: 381px;\n    // tried just about every combination of path... this is just the last one I tried\n    background-image: url(\'/src/assets/img/slide_blue.png\') !important;\n\n    form {\n        padding-top: 75px;\n        padding-bottom: -75px;\n    }\n}\n

\n\n

最后是webpack.config.js：

\n\n

var path = require(\'path\');\nvar webpack = require(\'webpack\');\nvar BundleTracker = require(\'webpack-bundle-tracker\');\nvar ExtractTextPlugin = require(\'extract-text-webpack-plugin\');\n\nconst VENDOR_LIBS = [\n  \'axios\', \'history\', \'lodash\', \'prop-types\', \'react\', \'react-dom\', \'react-dropzone\', \'react-redux\', \'react-router-dom\', \'react-router-redux\', \'redux\', \'redux-form\', \'redux-thunk\', \'reactstrap\'\n]\n\nmodule.exports = {\n  context: __dirname,\n\n  entry: {\n    app: \'../react/index\',\n    vendor: VENDOR_LIBS\n  },\n\n  output: {\n      path: path.resolve(\'./src/assets/bundles/\'),\n      filename: \'./js/[name].[chunkhash].js\'\n  },\n\n  module: {\n    rules: [\n      { \n        loader: \'babel-loader\',\n        test: /\\.js$/, \n        exclude: /node_modules/, \n        query: {\n          presets: ["react", "es2015", "stage-1"]\n        }\n      },\n      {\n        test: /\\.json$/,\n        loader: [\'json-loader\'] \n      },\n      {\n        test: /\\.scss$/,\n        loader: [\'style-loader\', \'css-loader\', \'sass-loader\'] \n      },\n      {\n        test: /\\.scss$/,\n        use: ExtractTextPlugin.extract({\n          fallback: \'style-loader\',\n          use: [\'css-loader\', \'sass-loader\']\n        })      \n      },   \n    ],\n  },\n  plugins: [\n    new webpack.optimize.CommonsChunkPlugin({\n      names: [\'vendor\', \'manifest\']\n    }),\n    new BundleTracker({filename: \'./src/config/webpack-stats.json\'}),\n    new ExtractTextPlugin({filename: \'./css/[name].[hash].css\', allChunks: true})\n  ],\n  resolve: {\n    extensions: [\'*\', \'.js\', \'.jsx\', \'.json\', \'.gif\', \'.png\'],\n  },\n}\n

\n\n

我在这里缺少什么阻止background-image: url(...)显示？

\n\n

编辑

\n\n

React 组件以防万一：

\n\n

    return (\n        <div className=\'login\'>\n            <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>\n                {this.renderAlert()}\n                <Field \n                    label=\'Username\'\n                    name=\'username\'\n                    type=\'username\'\n                    component={this.renderField} \n                />\n                <Field \n                    label=\'Password\' \n                    name=\'password\'\n                    type=\'password\' \n                    component={this.renderField} \n                />\n                <div className=\'row\'>\n                    <div className=\'col-sm-2\'>\n                        <button type=\'submit\' className=\'btn btn-primary\'>Sign in</button>\n                    </div>\n                    <div className=\'col-sm-10 pull-right\'>\n                        <ul className=\'pull-right signin\'>\n                            <li><Link to=\'/auth/username\'>Username Recovery</Link></li>                \n                            <li><Link to=\'/auth/password\'>Password Reset</Link></li>                                \n                            <br />\n                            <li><Link to=\'/auth/new_account\'>New Accounts</Link></li>\n                        </ul>\n                    </div>\n                </div>\n            </form>\n        </div>\n    );\n

\n\n

编辑2

\n\n

我添加了以下内容webpack.config.json：

\n\n

  {\n    test: /\\.png|jpg$/,\n    include: path.join(__dirname, \'assets/img\'),\n    loader: [\'file-loader\'] \n  },\n

\n\n

并将其更新background-image: url(...)为相对于我的入口点index.js：

\n\n

background-image: url(\'/../assets/img/slide_blue.png\');\n

\n\n

不会产生错误并且不会加载图像。

\n\n

尝试以下操作并产生相应的错误：

\n\n

background-image: url(\'../assets/img/slide_blue.png\');\nModule not found: Error: Can\'t resolve \'../assets/img/slide_blue.png\' in \'/mnt/c/dev/current/app/src/assets/scss\'\n

\n\n

还尝试了一下，会产生相应的错误：

\n\n

background-image: url(\'../../assets/img/slide_blue.png\');\nModule parse failed: Unexpected character \'\xef\xbf\xbd\' (1:0)\nYou may need an appropriate loader to handle this file type.\n

\n\n

所以还是不确定发生了什么。我一直在将图像加载到我的组件中，执行以下操作，这让我怀疑它是否正确（但这是另一个问题）：

\n\n

import logo from \'!!url-loader!../../../assets/img/logo.png\';\n

\n

Answer 1

您需要一个file-loader来处理图像文件：

{ 
    test: /\.(png|jpg)$/,
    include: path.join(__dirname, 'assets/img'),
    loader: 'file-loader' 
 }

该路径将相对于您的入口点。