Hey there! I see you're having trouble getting a background image to show up on your React-Bootstrap Jumbotron—let's fix that together. Here are the most likely issues and solutions:

1. Fix Inline Style Properties & Syntax #

Your current inline style has a few key issues that might be blocking the image:

• React uses camelCase for CSS property names (so background-image needs to be backgroundImage)
• You must wrap the image URL in url() for the browser to recognize it as an image source
• Without additional background properties, the image might be hidden (e.g., repeating infinitely or not filling the container)

Update your styles object like this:

const styles = {
  backgroundImage: "url('http://worldkings.org/Userfiles/Upload/images/Yale.jpg')",
  backgroundSize: "cover", // Makes the image fill the container without stretching
  backgroundRepeat: "no-repeat", // Prevents the image from tiling
  minHeight: "400px" // Ensures the Jumbotron has enough height to display the image
};

2. Use a Custom CSS Class (Higher Priority) #

Sometimes React-Bootstrap's built-in Jumbotron styles can override inline styles. Using a custom CSS class gives you more control and higher priority:

First, add this to your CSS file:

.custom-jumbotron {
  background-image: url('http://worldkings.org/Userfiles/Upload/images/Yale.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 400px;
}

Then apply the class to your Jumbotron component:

<Jumbotron className="custom-jumbotron">
  <h1>Public Art</h1>
  <br/>
  <p>A crowd-sourced archive of art in public spaces.</p>
  <Button bsStyle="primary" href="#">Learn more</Button>
  {/* Add your remaining buttons here */}
</Jumbotron>

3. Verify the Image URL #

Double-check that your image URL is valid: copy it into a browser tab and confirm the image loads. If it's blocked by cross-origin restrictions or the image has been removed, it won't display in your component.

4. Debug with Browser DevTools #

If the image still doesn't show up:

• Right-click the Jumbotron and select "Inspect"
• Go to the "Styles" tab in DevTools
• Look for the background-image property—check if it's being applied, or if it's crossed out (meaning it's overridden by another style)

Full Working Example (Inline Style Version) #

class Jumbo extends Component {
  render() {
    const styles = {
      backgroundImage: "url('http://worldkings.org/Userfiles/Upload/images/Yale.jpg')",
      backgroundSize: "cover",
      backgroundRepeat: "no-repeat",
      minHeight: "400px"
    };

    return (
      <div>
        <Jumbotron style={styles}>
          <h1>Public Art</h1>
          <br/>
          <p>A crowd-sourced archive of art in public spaces.</p>
          <Button bsStyle="primary" href="#">Learn more</Button>
          {/* Add your other buttons here */}
        </Jumbotron>
      </div>
    );
  }
}

内容的提问来源于stack exchange，提问作者Alexander Wisowaty