Javascript 如何使用引导在React.js中显示图像

抱歉，如果这是一个重复的问题。我似乎无法解决这个问题或找到答案

本质上我想显示一个图像，这样它会根据屏幕大小进行相应的调整。我正在使用React引导示例，但它不起作用。这是我正在使用的代码，这是到示例的链接

从“React”导入React；
从“react bootstrap”导入{ResponsiveEmbed，Image}；
导出默认的React.createClass（{
render（）{
返回(
);
}
});

这是它连接的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'))

从“React”导入React
从“react dom”导入{render}
从“/components/Footer”导入页脚
从“/components/HeaderNavigation”导入HeaderNavigation
从“/containers/App1Container”导入App1Container
从“/components/Carousel”导入旋转木马
类App1扩展了React.Component{
render（）{
返回(
)
}
}
render（，document.getElementById（'App1'））

如果您只需要图像，为什么不使用：

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

---

尝试替换此代码：

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

const responsiveEmbedInstance=(
);

---

下面是一个示例：

它应该是a16by9，而不是a16b9。由rishipuri回答

引导程序Jumbotron stuff不处理背景图像。试试这个 在文件顶部：

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

在你的部门：

---

它应该是

a16by9

，而不是

a16b9

。看看这是否有效。上述方法有效。非常感谢。嗨，Jayesh，这是一个链接到下面代码的组件。我们可以用图像替换img吗？

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