problem when rendering a photo in a component

I have a problem when rendering a photo in 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>
    )
}
}

As you can see on the label I pass in the src attribute the location of the image in my files, but then in the browser simply is not shown, as a test add an import with the address of one of the photos and in that case if it is displayed:

import foto from "./Images/covers/responsive.jpg"

but obviously that does not help me because I need to use the component in different cases with different images. now I leave the parent component in case it influences something

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>
    )}

}

The question is how can I do to solve this problem?