Как передать URL-адрес изображения в React Router? Изображение не отображается в компоненте, но изображение передается?

Question

Это мой маршрутизатор. js Файл. Я пытаюсь проверить, успешно ли загружается изображение. но отображается только URL-адрес, а не изображение.

    import ronaldo from './assets/images/ronaldo.jpg'
    import messi from './assets/images/messi.jpg'
    import Navigation from './Components/Navigation';
            class Router extends Component {

              state = {

                players:[
                  {
                    'id':1,
                    'name':'Ronaldo',
                    'image':ronaldo

                  },
                  {

                    'id':2,
                    'name':'Messi',
                    'image':messi

                  }

                ]
              }
              render(){

                return (
                  <div>
                    <Navigation />
                      <Switch>
                        <Route  exact path="/" component={App} />
                        <Route  exact path="/about" component={About} />
                        <Route  exact path="/contact" component={Contact} />
                        <Route  exact path="/players" render={(props) =>  <Players  {...props} players={this.state.players} />} />
                        <Route  exact path="/players/:image" component={PlayersContainer} />
                      </Switch>
                  </div>
                ); 
              }
              }
            export default Router;

У меня есть ссылки в проигрывателях. js Компонент.

 import  React  from 'react'
        import { Link } from 'react-router-dom'
        export default function Players(props){

            const renderPlayers = () => {

                return props.players.map((player) => (
                    <li><Link to={`/players/`+player.name+player.image }>  {player.name} </Link> </li>
                ))

            }
            return(
                <div>
                    <h1> Our Top Players </h1>
                    <ul>
                    {renderPlayers()}
                    </ul>
                </div>
            )

        }

Когда я нажимаю на ссылку, открывается компонент PlayersContainer, но изображение не загружается в тег.

import React from 'react'
        export default function PlayersContainer(props) {
            const displayPlayers = () => {
                console.log(props)    
            }

            return (
                <div>
                    {displayPlayers()}
                    <img src={`/${props.match.params.image}`} alt={props.match.params.name}></img>
                </div>
            )
        }

Answer 1

Я нашел решение, я просто сохранил имя изображения в объекте и передал его в маршруте. и в контейнере, где я показываю изображение, я просто добавил имя изображения к его местоположению в папке моих ресурсов.

import ronaldo from './assets/images/ronaldo.jpg'
import messi from './assets/images/messi.jpg'
import Navigation from './Components/Navigation';
class Router extends Component {

  state = {

    players:[
      {
        'id':1,
        'name':'Ronaldo',
        'imageURL':'ronaldo.jpg'

      }

Файл контейнера.

import React from 'react'

export default function PlayersContainer(props) {

   const displayPlayers = () => {

       console.log(props)

    }
    return (
        <div>
            <h1> Hello </h1>
            {displayPlayers()}
            <h3> Player ID : {props.match.params.id} </h3>
            <h3> Player Name : {props.match.params.name} </h3>
            <img src={require('../../assets/images/'+props.match.params.image)}></img>

        </div>
    )
}