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

Question

我正在使用 React Js 在网页中工作，因为整个项目都在使用它。我是 React

的新手

我需要将四个图像链接放在一个网格中，但我无法正常工作。这是我的代码

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

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

Why thumbnails don't load image Bootsrap

grid

thumbnails

reactjs