React - 捆绑/实时时动态图像渲染断断续续

Question

我遇到一个组件，它将一个name属性用作头像（用短划线替换空格并添加文件格式）。然后它被动态地用作img src。

在本地工作绝对精细，没有口吃改变图像。当我捆绑并部署到surge.sh并更改路由时，图像会断断续续。我期望这一点，因为最初需要下载每个图像，但即使在图像被缓存之后，交换图像也是生涩的。有任何想法吗？或者有更好的方法吗？

class Athlete extends Component {
    constructor (props) {
        super(props);
    }

    render () {
        let name = this.props.name;
        let imgName = name.replace(/\s+/g, '-').toLowerCase();
        let imgSrc = '/img/athletes/' + imgName + '.jpg';

        return (

            <div className="winner__inner">
                <img src={imgSrc} alt={name} className="winner__avatar"/>
                <h3 className="winner__name">{name}</h3>
            </div>

        );
    }
}

export default Athlete;

链接：http://boulder.surge.sh/（仅限桌面设备 - 点击其中一个活动）

GIF：https://i.gyazo.com/4dea5302d9671b4de0fadc2334f872da.gif

缓存图片：https://i.imgur.com/xQLgIWq.png

任何帮助都会很棒，谢谢！