title: How to display an image in React.js with Bootstrap
body: <p>Sorry if this is a duplicate question. I can't seem to solve this or find an answer. </p>
  
  <p>Essentially I want to display an image so it responsively adjusts depending on screen size. I'm using the React-Bootstrap example and it just isn't working. Here is the code I'm using and here is a link to the example <a href="https://react-bootstrap.github.io/components.html#media-content" rel="nofollow noreferrer">https://react-bootstrap.github.io/components.html#media-content</a> .</p>
  
  <pre><code>import React from 'react';
  import {ResponsiveEmbed, Image} from 'react-bootstrap';
  
  
  
  export default React.createClass ( {
      render() {
          return (
              &lt;div style={{width: 660, height: 'auto'}}&gt;
                  &lt;ResponsiveEmbed a16b9&gt;
                      &lt;embed type="image/href+xml" href = "https://static.pexels.com/photos/296886/pexels-photo-296886.jpeg"/&gt;
                  &lt;/ResponsiveEmbed&gt;
              &lt;/div&gt;
          );
      }
  });
  </code></pre>
  
  <p>This is the App.jsx file it connects too</p>
  
  <pre><code>import React from "react"
  import { render } from "react-dom"
  import Footer from "./components/Footer"
  import HeaderNavigation from "./components/HeaderNavigation"
  import App1Container from "./containers/App1Container"
  import Carousel from "./components/Carousel"
  class App1 extends React.Component {
    render() {
      return (
          &lt;div&gt;
            &lt;HeaderNavigation /&gt;
            &lt;Carousel /&gt;
            &lt;App1Container/&gt;
            &lt;Footer/&gt;
          &lt;/div&gt;
      )
    }
  }
  
  render(&lt;App1/&gt;, document.getElementById('App1'))
  </code></pre>