如何使用 Bootstrap 在 React.js 中显示图像

Question

Sorry if this is a duplicate question. I can't seem to solve this or find an answer.

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 examplehttps://react-bootstrap.github.io/components.html#media-content .

import React from 'react';
import {ResponsiveEmbed, Image} from 'react-bootstrap';



export default React.createClass ( {
    render() {
        return (
            <div style={{width: 660, height: 'auto'}}>
                <ResponsiveEmbed a16b9>
                    <embed type="image/href+xml" href = "https://static.pexels.com/photos/296886/pexels-photo-296886.jpeg"/>
                </ResponsiveEmbed>
            </div>
        );
    }
});

This is the App.jsx file it connects too

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 (
        <div>
          <HeaderNavigation />
          <Carousel />
          <App1Container/>
          <Footer/>
        </div>
    )
  }
}

render(<App1/>, document.getElementById('App1'))

Answer 1

如果你只想要图像为什么不使用：

<Image src="https://static.pexels.com/photos/296886/pexels-photo-296886.jpeg" responsive />

Answer 2

Try replacing this code:

const responsiveEmbedInstance = (
<div style={{width: 500, height: 'auto'}}>
<ResponsiveEmbed a16by9>
  <embed type="image/svg+xml" src="https://static.pexels.com/photos/296886/pexels-photo-296886.jpeg" />
</ResponsiveEmbed>
</div>
);

Here is an example: http://jsfiddle.net/jayesh24/ywzw5hrt/

Answer 3

Bootstrap Jumbotron stuff does not deal with background image. Try this instead at top of file:

import Jumbotron from "./src/img/1.png"

in your div: <img style={{height:'auto',width:'100%'}} src={ Jumbotron }/>

Answer 4

It should be a16by9 and not a16b9. Answered by rishipuri

Answer 5

Use react-bootstrap package

import Image from "react-bootstrap/Image";
import "bootstrap/dist/css/bootstrap.css";

<Image src="image.png" fluid/>