Question

我在使用react Js的网页中工作，因为整个项目正在使用它。我很反应

我需要在网格中放置四个图像链接，但我不能正常工作。这是我的代码

import React from 'react';
import { Col, Row, Thumbnail } from 'react-bootstrap';
import { firebaseConnect, pathToJS, dataToJS } from 'react-redux-firebase';
import { connect } from 'react-redux';
import { Link, withRouter } from 'react-router-dom';
import { refreshTableauTicket } from '../actions/TableauActions';
import {Grid, Container} from 'react-bootstrap';


const ProjectThumbnail = (props) => {
  let size ={
    width: 200,
    height: 240,
  };
  return(
    <Grid >
      <Row className="show-grid">
        <Col xs={12} md={8}>
          <Link to={props.url}>
          <Thumbnail src="/assets/5.jpg" style={size} alt='thumbnail'/>
          <h3>{props.nombreProyecto}</h3>
          </Link>
        </Col>
        <Col xs={12} md={8}>
          <Link to={props.url}>
          <Thumbnail src="/assets/5.jpg" style={size} alt='thumbnail'/>
          <h3>{props.nombreProyecto}</h3>
          </Link>
        </Col>
      </Row>

      <Row className="show-grid">
        <Col xs={12} md={8}>
          <Link to={props.url}>
          <Thumbnail src="/assets/5.jpg" style={size} alt='thumbnail'/>
          <h3>{props.nombreProyecto}</h3>
          </Link>
        </Col>
        <Col xs={12} md={8}>
          <Link to={props.url}>
          <Thumbnail src="/assets/5.jpg" style={size} alt='thumbnail'/>
          <h3>{props.nombreProyecto}</h3>
          </Link>
        </Col>
      </Row>
    </Grid>
  );
}

const ProjectSelect = (props) => {
  let userId = props.firebase.auth().currentUser.uid;
  let style = {'maxWidth':'80%'};
  return(
    <div style={style}>
      <Row onClick={props.refreshTableauTicket}>
        <ProjectThumbnail nombreProyecto='transmilenio carrera septima' url='/proyecto'/>
      </Row>
    </div>
  );
}

//const wrappedSelection = firebaseConnect()(ProjectSelect)
const FirebaseConnected = firebaseConnect()(ProjectSelect)

const ProjectSelection = connect(
  ({firebase}) => ({
    auth: pathToJS(firebase, 'auth'),
  }),{refreshTableauTicket}
)(FirebaseConnected)

export default withRouter(ProjectSelection);

但是使用这段代码，图片不会加载，网格也不能正常工作，因为元素互不对齐

如果你能解释为什么这不起作用，我将不胜感激

Answer 1

在{}

中指定缩略图src

const ProjectThumbnail = (props) => {
  let size ={
    width: 200,
    height: 240,
  };
  return(
    <Grid >
      <Row className="show-grid">
        <Col xs={12} md={8}>
          <Link to={props.url}>
          <Thumbnail src={"/assets/5.jpg"} style={size} alt='thumbnail'/>
          <h3>{props.nombreProyecto}</h3>
          </Link>
        </Col>
        <Col xs={12} md={8}>
          <Link to={props.url}>
          <Thumbnail src={"/assets/5.jpg"} style={size} alt='thumbnail'/>
          <h3>{props.nombreProyecto}</h3>
          </Link>
        </Col>
      </Row>

      <Row className="show-grid">
        <Col xs={12} md={8}>
          <Link to={props.url}>
          <Thumbnail src={"/assets/5.jpg"} style={size} alt='thumbnail'/>
          <h3>{props.nombreProyecto}</h3>
          </Link>
        </Col>
        <Col xs={12} md={8}>
          <Link to={props.url}>
          <Thumbnail src={"/assets/5.jpg"} style={size} alt='thumbnail'/>
          <h3>{props.nombreProyecto}</h3>
          </Link>
        </Col>
      </Row>
    </Grid>
  );
}

为什么缩略图不加载图像Bootsrap

1 个答案: