Código de del componente Card
import React from 'react';
export default class Card extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
<div className="card-Games">
<div>
<img src={this.props.imagen01} />
<h4>{this.props.name01}</h4>
{/*<a href="#">Agregar</a>*/}
</div>
<img src="" alt=""/>
<div>
<img src={this.props.imagen02} />
<h4>{this.props.name02}</h4>
{/*<a href="#">Agregar</a>*/}
</div>
{/* Las imágenes son de prueba*/}
</div>
);
}
}
Como pueden ver en este código, meto cada imagen que quiero agregar al homepage cierto, pero lo que quiero es pasarle mis propias imágenes que tengo agregadas a mi Proyecto, estoy intentando importando la imagen que quiero mostrar en la etiqueta div Pero no se me esta mostrando, me serviría mucho si me pueden ayudar a ver el error, o buscar una solución posible de esta, muchas gracias de antemano
Código contenedor para todas las imágenes que se agreguen
import Card from './cards/card';
import Callofduty from '../images/playstation/callofdutyMW.jpg'
export default class Content extends Component {
constructor(props) {
super(props); {
this.state = {
card1: {
img: 'https://vignette.wikia.nocookie.net/fifa/images/a/aa/FIFA_20_Regular_Edition.jpg/revision/latest/scale-to-width-down/310?cb=20191002111706&path-prefix=es ' ,
name: 'FIFA 20',
subname: 'Lanzado 2019',
},
card2: {
img: {Callofduty},
name: 'FIFA 21',
subname: 'Lanzado 2020',
}
}
}
}
render() {
return (
<div className="Home-content">
{/* Probando las props para los contenidos individuales*/}
<Card imagen01={this.state.card1.img}
name01={this.state.card1.name}
/>
<Card imagen02={this.state.card2.img}
name02={this.state.card2.name}
/>
</div>
);
}
} ```