Javascript 如何在React和Ant Design中的图像之间切换可见性设置？

我正在创建一个页面来显示徽章，因为我在我的项目中实现了游戏化功能。现在，我想在用户未解锁徽章时显示一个“灰色”徽章。大概是这样的：

一旦用户解锁徽章，将显示“青铜”徽章

我正在使用Ant Design制作卡片组件以显示徽章。代码当前看起来像这样。我不知道如何在徽章之间切换可见性。它们应该占据相同的空间。除非有更好的方法

<Col span={6}>
    <Card type ='flex' align = 'middle'>
        Atta Boy!
        <img src="/greysmall.png" justify = 'center'/>
        Card content
    </Card>
 </Col>

好样的！
卡片内容

您可以使用基于布尔值显示一个或另一个的三元运算吗

<Col span={6}>
    <Card type ='flex' align = 'middle'>
        Atta Boy!
        {isBadgeEarned
           ? <img src="/success.png" justify = 'center'/>
           : <img src="/greysmall.png" justify = 'center'/>
         }
        Card content
    </Card>
 </Col>

好样的！
{伊斯兰堡
? 
: 
}
卡片内容

啊，那可能有用！我是新的反应和javascript，所以谢谢你！