tengo un problema a la hora de renderizar una foto en react
export default class Media extends React.Component {
constructor(props){
super(props)
this.state = {subTitle: props.subTitle }
}
componentWillMount(){
console.log(this.props.img)
}
HandlerClick = (event) =>{
this.setState({subTitle: 'click'})
// this.forceUpdate();
console.log('dd')
}
render(){
return(
<div className="Media" onClick={this.HandlerClick } >
<div className="Media-cover" >
<img
src={this.props.img}
alt=''
width={260}
height={160}
className="Media-image"
/>
<h3 className="Media-title" >{this.props.title}</h3>
<p className="Media-author" >{this.state.subTitle}</p>
</div>
</div>
)
}
}
como pueden ver en la etiqueta le paso en el atributo src la ubicacion de la imagen en mis archivos, pero luego en el navegador simplemente no se muestra, a modo de prueba agregue un import con la dirección de una de las fotos y en ese caso si se muestra:
import foto from "./Images/covers/responsive.jpg"
pero obviamente eso no me sirve por que necesito usar el componte en diferentes casos con deferentes imágenes. ahora les dejo el componente padre por si influye en algo
export default class Playlist extends React.Component{
constructor(props){
super(props)
}
render(){
return(
<div>
{this.props.src.categories[0].playlist.map( (item) => {
return <Media title={item.title} subTitle={item.author} img={item.cover} key={item.id} />
}) }
</div>
)}
}
la pregunta es como puedo hacer para solucionar este problema?