爲什麼縮略圖不加載圖片Bootsrap

Question

我正在使用反應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> 
); 
}