基本上，我在尝试将一张图片显示在一个容器的背景中，但是它没有加载出来。我已经尝试了不同的路径，因为我不太清楚URL相对于什么来说：是相对于package.json，webpack.config.js，React组件还是我正在工作的login.scss。
除了webpack.config.js，我还会提供目录结构：
/app
/src
/assets
/img
slide_blue.png
/scss
login.scss
/config
webpack.config.js
/react
/containers
/authentication
signin.js
index.js // entry point
package.json
login.scss 目前很短，其他样式都在起作用:
// logic.scss
@import 'declarations';
.login {
height: 381px;
// tried just about every combination of path... this is just the last one I tried
background-image: url('/src/assets/img/slide_blue.png') !important;
form {
padding-top: 75px;
padding-bottom: -75px;
}
}
最后，是webpack.config.js配置文件:
var path = require('path');
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
const VENDOR_LIBS = [
'axios', 'history', 'lodash', 'prop-types', 'react', 'react-dom', 'react-dropzone', 'react-redux', 'react-router-dom', 'react-router-redux', 'redux', 'redux-form', 'redux-thunk', 'reactstrap'
]
module.exports = {
context: __dirname,
entry: {
app: '../react/index',
vendor: VENDOR_LIBS
},
output: {
path: path.resolve('./src/assets/bundles/'),
filename: './js/[name].[chunkhash].js'
},
module: {
rules: [
{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/,
query: {
presets: ["react", "es2015", "stage-1"]
}
},
{
test: /\.json$/,
loader: ['json-loader']
},
{
test: /\.scss$/,
loader: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
},
],
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest']
}),
new BundleTracker({filename: './src/config/webpack-stats.json'}),
new ExtractTextPlugin({filename: './css/[name].[hash].css', allChunks: true})
],
resolve: {
extensions: ['*', '.js', '.jsx', '.json', '.gif', '.png'],
},
}
我在这里缺少什么，导致无法显示background-image: url(...)？
编辑
React组件如下：
return (
<div className='login'>
<form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
{this.renderAlert()}
<Field
label='Username'
name='username'
type='username'
component={this.renderField}
/>
<Field
label='Password'
name='password'
type='password'
component={this.renderField}
/>
<div className='row'>
<div className='col-sm-2'>
<button type='submit' className='btn btn-primary'>Sign in</button>
</div>
<div className='col-sm-10 pull-right'>
<ul className='pull-right signin'>
<li><Link to='/auth/username'>Username Recovery</Link></li>
<li><Link to='/auth/password'>Password Reset</Link></li>
<br />
<li><Link to='/auth/new_account'>New Accounts</Link></li>
</ul>
</div>
</div>
</form>
</div>
);
编辑2
我在webpack.config.json中添加了以下内容：
{
test: /\.png|jpg$/,
include: path.join(__dirname, 'assets/img'),
loader: ['file-loader']
},
并将
background-image: url(...)更新为相对于我的入口点index.js：
background-image: url('/../assets/img/slide_blue.png');
不会产生错误，也无法加载图片。
尝试以下操作会产生相应的错误：
background-image: url('../assets/img/slide_blue.png');
Module not found: Error: Can't resolve '../assets/img/slide_blue.png' in '/mnt/c/dev/current/app/src/assets/scss'
我尝试了这个方法，但是出现了相应的错误：
background-image: url('../../assets/img/slide_blue.png');
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
我仍然不确定问题出在哪里。我一直在将图像加载到我的组件中，使用以下方法，这让我质疑是否正确（但这是另一个问题）：
import logo from '!!url-loader!../../../assets/img/logo.png';