反应 CardImg 不呈现

Question

我正在尝试让我的 React CardImg 进行渲染，但没有成功。我正在导入照片数组，以状态传递它，并尝试在 line 的 40 CardImg 组件上渲染它。我试过更改文件路径但没有成功。任何帮助，将不胜感激。图片文件夹位于 public 文件夹内。

import React, { Component } from 'react';
import { CardTitle, Jumbotron, Card, CardBody, CardHeader, CardImg, Button, Modal, ModalHeader, ModalBody, Form, FormGroup, Input, Label, Col, Row, InputGroup, CardSubtitle, CardImgOverlay } from 'reactstrap';
import DatePicker from "react-datepicker";
import { PHOTOS } from '../shared/photos';
import "react-datepicker/dist/react-datepicker.css";


class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isModalOpen: false,
            photos: PHOTOS,
        };
        this.toggleModal = this.toggleModal.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(values) {
        this.props.postQuery(values);
    };
    toggleModal() {
        this.setState({
            isModalOpen: !this.state.isModalOpen
        });
    }

    render() {
        return (
            <React.Fragment>
                <Jumbotron id="homePage"></Jumbotron>
                <div className="container">
                    <div className="row">
                        <div className="col-sm-6">
                            <h1>Maximum Experience</h1>
                            <h2>Minimum Weight</h2>
                        </div>
                        <div className="col-sm-6">
                            <Card>
                                <CardImg src={this.state.photos.image} width='100%' alt="Hiking" />
                            </Card>
                        </div>
                    </div>

photos.js

export const PHOTOS = [
    {
        id: 0,
        name: 'Card Home Image',
        image: 'images/homeCard.jpg',
    }
]

Answer 1

你的this.state.photos是一个数组。所以你需要 {this.state.photos[0].image}.

当数组中有多个照片对象时，您需要遍历它以渲染所有照片，例如

{
  this.state.photos.map(photo => (
      <Card>
         <CardImg src={photo.image} width='100%' alt="Hiking" />
      </Card>
  )
}

反应 CardImg 不呈现

React CardImg not rendering

reactjs

reactstrap

card