时间戳

首页 > 解决方案 > HTML React JSX：在 React 组件返回渲染中获取两个图像以全屏渲染

html - HTML React JSX：在 React 组件返回渲染中获取两个图像以全屏渲染

问题描述

我正在尝试在我的一个网页上渲染两个图像，每个图像都是 100% 全屏显示。但它们显示得非常小。我已经尝试了很多东西，从样式到 css，但图像的大小不会改变。

这是网页：

在此处输入图像描述

下面是我的代码：

import React from 'react'
import {connect} from 'react-redux'
import {Link} from 'react-router-dom'
import {getBeers} from '../store/allBeers'

import {
  Button,
  ButtonGroup,
  ButtonToolbar,
  Dropdown,
  DropdownButton
} from 'react-bootstrap'

class AdminDash extends React.Component {
  render() {
    // console.log('before beer......', this.props.beers)
    // const beers = this.props.beers
    // console.log('beer variable......', beers)

    return (
      <div style={{border: 'solid 1px black', height: '100vh'}}>
        <ButtonToolbar aria-label="Toolbar with button groups">
          <ButtonGroup className="mr-2" aria-label="First group">
            <Link to="/admin/dashboard">
              <Button variant="outline-info">Admin Home Page</Button>
            </Link>
          </ButtonGroup>

          <ButtonGroup className="mr-2" aria-label="Second group">
            <Link to="/admin/edit/orders">
              <Button variant="outline-info">Admin Order Management</Button>
            </Link>
          </ButtonGroup>

          <ButtonGroup className="mr-2" aria-label="Second group">
            <Link to="/admin/edit/users">
              <Button variant="outline-info">Admin User Management</Button>
            </Link>
          </ButtonGroup>

          <ButtonGroup className="mr-2" aria-label="Second group">
            <Link to="/admin/post/beer">
              <Button variant="outline-info">Create New Product</Button>
            </Link>
          </ButtonGroup>

          <ButtonGroup className="mr-2" aria-label="Second group">
            <Link to="/admin/edit/beer/3">
              <Button variant="outline-info">Edit Existing Product</Button>
            </Link>
          </ButtonGroup>

          <ButtonGroup aria-label="Third group">
            <DropdownButton
              variant="outline-info"
              as={ButtonGroup}
              title="Admin Product Management"
              id="bg-nested-dropdown"
            >
              <Link to="/admin/post/beer">
                <Dropdown.Item eventKey="1">Create New Product</Dropdown.Item>
              </Link>

              <Link to="/admin/edit/beer/3">
                <Dropdown.Item eventKey="2">
                  Update Existing Product
                </Dropdown.Item>
              </Link>
            </DropdownButton>
          </ButtonGroup>
        </ButtonToolbar>
        <br />

        {/* <img
          id="dash-image-mock"
          src="https://res.cloudinary.com/dejiqayjc/image/upload/v1569248053/fundus_pics/admindash_part1_kkgphi.png"
        />

        <br />

        <img
          id="dash-image-mock"
          src="https://res.cloudinary.com/dejiqayjc/image/upload/v1569248058/fundus_pics/admindash_part2_ikbsxd.png"
        /> */}

        <html lang="en">
          <head>
            <meta charset="UTF-8" />
            <meta
              name="viewport"
              content="width=device-width, initial-scale=1.0"
            />
            <meta http-equiv="X-UA-Compatible" content="ie=edge" />
            <title>Document</title>
          </head>
          <body>
            <img src="https://res.cloudinary.com/dejiqayjc/image/upload/v1569248053/fundus_pics/admindash_part1_kkgphi.png" />
            <br />
            <br />
            <br />
            <img src="https://res.cloudinary.com/dejiqayjc/image/upload/v1569248058/fundus_pics/admindash_part2_ikbsxd.png" />
          </body>
        </html>
      </div>
    )
  }
}

const mapState = state => {
  return {
    beers: state.allBeers
  }
}

// const mapDispatch = (dispatch) => {
//   return {
//     fetchBeers: () => dispatch(getBeers)
//   }
// }

export default connect(mapState)(AdminDash)

我究竟做错了什么？

标签： htmlreactjsimagejsx

解决方案

推荐阅读