我正在尝试使用 css 及其 url 功能向 ReactJS 元素中的控件添加背景图像。
.jumbotron {
background-image: url(../images/image.jpeg);
background-position: center;
background-repeat: no-repeat;
background-size: 100% auto;
color: 6b6b6b;
}
但是,加载程序正在中断,因为它正在尝试解析二进制文件。意想不到的字符。删除背景线,一切正常。
我正在使用 webpack,我的模块是这样加载的:
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
]
}
如何让我的 React 应用程序将此 css 图像用作背景 url?使用 create-react-app 创建元素 - 它有效,但我看不到它是如何处理图像的。
我有一个 repo 协议(protocol): https://github.com/CraigInBrisbane/ReactLearning
任何帮助都会很棒。
最佳答案
当你使用 css-loader
时,webpack 会删除你所有的 background-image: url(../images/image.jpeg);
并插入 require (../images/image.jpeg)
。有两种方法可以解决这个问题:
1) 为这些类型的文件添加file-loader/url-loader
2) 使用绝对路径而不是相对路径 ( background-image: url(/images/image.jpeg);
) 并且 css-loader 将跳过此图像
关于css - 在 CSS 中使用图像 url 时,React 应用程序编译失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47744202/