Как загрузить локальные изображения в React через реквизит?

Я поместил загруженные изображения в папку images внутри моей папки public. Изображения пронумерованы от 1 до 10.

В моем файле App.js я передаю id каждого изображения в Component.js.

return(
  <div>
    {info.map((users, i) => {
      return(
        <Component key = {i} id = {info[i].id} />
      )
    })}
  </div>
)

А в файле Component.js я визуализирую вот такое изображение:

<img alt='image' src='/images/{this.props.id}.jpg'/>

Мое видение состоит в том, что я отправлю идентификатор через реквизиты из App.js, а в Component.js я буду использовать этот идентификатор для {this.props.id}.jpg для отображения соответствующего изображения идентификатора. Страница загружается, ошибок нет, но я не вижу изображения. Затем я изменил местоположение папки с изображениями и попытался сделать это:

<img alt='image' src = {require(`D:/project-name/src/images/${this.props.id}.jpg`)}/>

Но все еще сталкивается с той же проблемой. Пожалуйста, помогите мне решить эту проблему.