抱歉，如果這是一個重復的問題。我似乎無法解決這個問題或找到答案。

本質上，我想顯示一個圖像，這樣它就可以根據屏幕大小做出相應的調整。我正在使用反應引導的例子，它就是不工作。這是我正在使用的代碼，這里有一個例子https://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" />
                </ResponsiveEmbed>
            </div>
        );
    }
});

這也是它連接的App.jsx文件

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'))

如果您想要的只是圖像，為什么不使用:

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

自舉大屏幕的東西不處理背景圖像。試試這個 在文件頂部:

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

在您的部門中: & ltimg style={{height:'auto '，width:' 100% ' } } src = { jumbo tron }/& gt；

嘗試替換此代碼:

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>
);

這里有一個例子:http://jsfiddle.net/jayesh24/ywzw5hrt/

應該是a16by9而不是a16b9。由rishipuri回答

使用反應引導包

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

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

如果存儲在數據結構(const，var，...)

<img
  src={URL.createObjectURL(image)}
  alt="Error loading file"
/>