Javascript 如何根据ReactJS中的JSON键值导入/添加多个图像？

我试图根据JSON数据中的JSON键值添加多个图像

{“名称”：“缩写”}-> {“阿拉巴马州”：“AL”， “阿拉斯加”：“AK”， “亚利桑那州”：“亚利桑那州”， “阿肯色州”：“AR”， “加州”：“加州”， “科罗拉多州”：“CO”，…}

我下载了一些图片，它们的名字像'al.png'，'ak.png'，'az.png'，这些图片都是按照JSON格式的值命名的。如何为我创建的特定卡组件设置每个图像

    import  "./card.styles.css"

export const Card =(props)=>(
    <div className="card-container">
    <h1>{props.states.name}
       I am trying to add images here



     
 </h1></div>)"

This is how I am fetching all states name onto Card-list component-

componentDidMount() {
    fetch("https://worldpopulationreview.com/static/states/abbr-name-list.json").
    then((response) => response.json())
    .then(users=>this.setState({states:users}));

  }

  render() {
    return (
      <div className='App'>
      <CardList states={this.state.states}>
      </CardList>
        
      </div>```

导入“/card.styles.css” 导出常量卡=（道具）=>( {props.states.name} 我试图在这里添加图像 )" 这就是我如何将所有州的名称提取到卡列表组件上的方法- componentDidMount（）{ 取回（“https://worldpopulationreview.com/static/states/abbr-name-list.json"). 然后（（response）=>response.json（） .then（users=>this.setState（{states:users}））； } render（）{ 返回( ```

---

如果您在

公用文件夹中有这些图像，则您的卡组件应如下所示：

export const Card =(props)=>(
  <div className="card-container">
  <h1>{props.states.name}
     <img src={`${process.env.PUBLIC_URL}/images/${props.states.abbreviation.toLowerCase()}.png`} />
  </h1>
</div>
)

export const Card=（道具）=>(
{props.states.name}
)
据我所知，您想给每张卡提供数据吗

如果我是对的，在你的卡片列表组件中

users.map((user) => <Card><h1>{user.name}</h1><img src={user.image}</img></Card>

users.map（（user）=>{user.name}
这些图像位于何处？