reactjs - React CardImg 不渲染
问题描述
我试图让我的 React CardImg 渲染没有运气。我正在导入照片数组,以状态传递它,并尝试在行的 40 CardImg 组件上呈现它。我试过更改文件路径但没有运气。任何帮助,将不胜感激。图片文件夹位于公用文件夹内。
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>
照片.js
export const PHOTOS = [
{
id: 0,
name: 'Card Home Image',
image: 'images/homeCard.jpg',
}
]
解决方案
你this.state.photos
的是一个数组。所以你需要{this.state.photos[0].image}
.
当数组中有多个照片对象时,您需要对其进行迭代以渲染所有照片,例如
{
this.state.photos.map(photo => (
<Card>
<CardImg src={photo.image} width='100%' alt="Hiking" />
</Card>
)
}
推荐阅读
- html - Web 应用程序的 RESTful API 重定向,更改基本 URL
- jquery - 如何在 React js 中使用 jquery
- angular - 尝试将属性用于 [(value)] 时出错
- android - Android Biometrics - 选择哪种方法(回退到密码)?
- c++ - C++意外调用继承类的函数
- python - run_algorithm() 失败,因为它无法从 Internet 源获取数据(403 Forbidden)
- tinymce - 所见即所得编辑器不会在 Chrome 中激活
- r - 如何使用 ggplot2 用多边形列表绘制我的形状?
- javascript - 如何检查数组中的对象是否有空字符串?
- c - 如何修复由-Wconversion引起的错误?