Динамический импорт активов в приложении create-реагировать на основе свойств компонента

Question

Вот сценарий: у меня есть функциональный компонент, который принимает product объект в его props

import React, { Component } from 'react';
import * as S from './styles';  

const MiscProduct = props => {

        return (
            <S.MiscButton onClick={props.onClick}>
            <S.MiscImage src={require(`../../../assets/imgs/misc/${props.product.id}.png`)}/>
            <S.MiscTitle>
                <h1>{props.product.name}</h1>
            </S.MiscTitle>
            <S.MiscPrice>
                {props.product.price}
            </S.MiscPrice>

        </S.MiscButton>
    );

}


export default MiscProduct;

В этом компоненте мне также нужно отрендерить img (S.MiscImage ), который берет актив с именем файла, соответствующим идентификатору этого продукта. Это приложение не имеет бэкэнда, и я не могу обслуживать ресурсы, используя его, так как я планирую разместить его на GH-Pages, поэтому мой инстинкт состоял в том, чтобы вручную поместить все активы на мой src/assets/imgs/ в соответствии с именами файлов, а затем динамически импортируйте их внутри компонента, чтобы webpack мог добавить это к моему пакету, и я мог позже оптимизировать изображения или делать с ними что угодно, используя webpack.

Я не мог найти способ сделать это, используя обычные import, как рекомендуют люди, поэтому я использовал require, который отлично работал для того, что я хотел. Тем не менее, Дан Абрамов упомянул в этом выпуске , что CRA не поддерживает требование и даже предлагает добавить правило lint, чтобы запретить его использование в другом выпуске. Он предлагает использовать папку / publi c для обслуживания ресурсов stati c, однако веб-пакет не обрабатывает файлы в этой папке и просто копирует их в пакет как есть.

Мой вопрос такой: почему бы не рекомендовать require в этой ситуации? Есть ли какой-то недостаток? Есть ли другой способ динамического обслуживания активов внутри моего компонента? Это простое приложение, которое я использую для экспериментов с React, поэтому мой подход к использованию ресурсов может быть в корне неверным.