Как получить значение из <img>и перейти к функции?

Question

Рассмотрим код ниже:

    {Object.keys(data).map((key) => 
        <div className="card">
        <img 
          id={ data[key].id }
          src={this.image} // 
          className="img-card-top"
          style={{height:"14rem"}} 
          alt="recipe"
         />
    }

Итак, из этого <img> я хочу получить id={ data[key].id } и перейти к функции изображения

    image(id){
          // const id = this.state.data.id;
          fetch(`http://localhost:9000/api/item/photo/view/${id}`,)
          .then((resp)=>{
            resp.json().then((res)=>{
             console.log(res);
             this.setState({data: res.data});}
            )
            // console.log(this.state.data)
          })
        }

Так что id Я получаю от <img>, перейду к fetch API в image(). Как правильно это сделать?

Answer 1

Просто используйте Dynami c URL в качестве sr c, не нужно использовать fetch(url)

{Object.keys(data).map((key) => 
  <div className="card">
    <img 
        id={ data[key].id }
        src={`http://localhost:9000/api/item/photo/view/${id}`} 
        className="img-card-top"
        style={{height:"14rem"}} 
        alt="recipe"
    />
  </div>
)}