Twitter bootstrap Reactjs-can'；t在引导程序上设置背景图像'；s Jumbotron

图像没有出现，我不确定是语法错误还是图像路径错误

import React, { Component } from 'react';
import { Jumbotron, Button } from 'react-bootstrap';
import { Link } from 'react-router-dom'


class Jumbo extends Component {
  render() {
    function myFunction() {
      console.log('test');
    }

    return (
      <Jumbotron style={styles.container}>
        <h1>{this.props.title}</h1>
        <p>In a town like Twin Peaks no one is innocent</p>
        <Button
          bsStyle="primary"
          onClick={myFunction}
        >
          Learn more
        </Button>
        <Button
          bsStyle="primary"
        >
          <Link to='/contact'>Contact</Link>
        </Button>
      </Jumbotron>
    );
  }
}

const bgImage = '../images/twin.jpg';

const styles = {
    container: {
    backgroundImage: `url(${bgImage})`
  }
};
export default Jumbo;

import React，{Component}来自'React'；
从“react bootstrap”导入{Jumbotron，Button}；
从“react router dom”导入{Link}
类Jumbo扩展组件{
render（）{
函数myFunction（）{
console.log（'test'）；
}
返回(
{this.props.title}
在像双峰这样的小镇上，没有人是无辜的

了解更多
接触
);
}
}
常量bgImage='../images/twin.jpg'；
常量样式={
容器：{
backgroundImage:`url（${bgImage}）`
}
};
导出默认巨型机；

“Jumbo”组件位于“Components”目录中。“twin.jpg”位于“images”目录中。请看下面的截图

---

这很可能是路径问题——react代码看起来是正确的。我不确定您的项目是如何设置的，但通常图像资产会进入您的

公共

目录。可能

public/images

。然后从web服务器的根目录访问它们，路径可能是：

url（/images/twin.jpg）

---

首先尝试将图像放入公用文件夹，然后尝试通过浏览器URL直接访问它们。

您应该将您的网页打包以生成项目，然后在导入图像时，您将拥有该图像www或公用文件夹

就这样。我不知道它应该公开。现在你指出了，这是有道理的。