Question

运行npm run build后，我的图像没有在使用Bootstrap 4.3的React App中渲染。

我已将图像移到了公共目录（/images/bg.jpg）。我可以在开发环境（npm start）中正确渲染它。但是，如果我执行npm run build然后部署到GH-Pages，则该图像不会在超大屏幕（https://jobu206.github.io/hotdog-usa）中呈现。

反应组件和CSS

import React, { Component } from "react";
import "./style.css";

class Jumbotron extends Component {
  render() {
    return (
      <div class="jumbotron jumbotron-fluid">
        <div class="container">

        </div>
      </div>
    );
  }
}

export default Jumbotron;

.jumbotron {
  background: url("/images/bg.jpg") no-repeat center center;
  background-size: cover;
  min-height: 60vh;
}

期望的是，开发版本和产品版本将同步并且外观相同。

Answer 1

渲染JSX时，您需要通过className道具而不是当前的class指定CSS类：

class Jumbotron extends Component {
  render() {
    return (
      { /* replace class with className */ }
      <div className="jumbotron jumbotron-fluid">
        <div className="container">

        </div>
      </div>
    );
  }
}

React Prod构建中的Jumbotron背景图像无法渲染

1 个答案: