css - 在 CSS 中使用图像 url 时,React 应用程序编译失败

标签 css reactjs webpack

我正在尝试使用 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/

相关文章:

javascript - 为什么 props 在情感 js 组件的不同实例之间共享?

javascript - 如何从按钮中正确检索事件 ID 并用于删除 Ajax 请求

javascript - 将组件直接渲染到模板中

javascript - 在浏览器和 Node 之间共享 Tree-shaking TypeScript/JavaScript

html - 输入和按钮彼此相邻时的额外空间

jquery - 从 jQuery 脚本中的 TOP 和 LEFT 值中减去像素

php - Firebug 无法个性化 css 选择器

javascript - 在 React JS 中将 props 从一个类组件传递到另一个类组件

javascript - 使用 webpack 处理图像的想法

具有伪悬停的类中的 CSS 过渡