Question

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

基本上我想显示图像，以便根据屏幕尺寸进行响应性调整。我使用的是React-Bootstrap示例，它只是不起作用。以下是我使用的代码，这里是示例https://react-bootstrap.github.io/components.html#media-content的链接。

typename

这也是它连接的App.jsx文件

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

Answer 1

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

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

Answer 2

尝试替换此代码：

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/

Answer 3

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

Answer 4

Bootstrap Jumbotron内容不处理背景图像。试试这个在文件顶部：

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

在您的div中： <img style={{height:'auto',width:'100%'}} src={ Jumbotron }/>

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

4 个答案: