如何根據 ReactJS 中的 JSON 鍵值導入/添加多個圖像？

Question

我正在嘗試根據 JSON 數據中的 JSON 鍵值添加多個圖像

{"name":"abbreviation"}-> {"Alabama": "AL", "Alaska": "AK", "Arizona": "AZ", "Arkansas": "AR", "California": "CA ", "科羅拉多": "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>```

Answer 1

如果您在public文件夾中有這些圖像，那么您的卡組件應該是這樣的：

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>
)

Answer 2

據我了解，您想為各個卡片提供數據？

如果我是對的，在你的 CardList 組件中，

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