Estoy tratando de obtener el resultado de una llamada API y ponerlo en el src de una imagen así <img className="card-img-top" src={loadImage(result.token_id)} alt={result.token_id} />

Obtuve la URL de origen de la imagen correcta de la promesa usando then(response => console.log(response.image_preview_url)) sin ningún problema en la consola.

Mi problema es que no puedo averiguar cómo se inyecta en el src desde allí.

Este es el código relevante que estoy usando:

 async function loadImage(token_id) { return new Promise((resolve, reject) => { const options = { method: 'GET' }; const osstuff = fetch( 'https://api.opensea.io/api/v1/asset/0xd782abhdgc76h6ljgfdedhhhhg6fcfhf17da/' + token_id + '/?include_orders=false', options ) .then((response) => response.json()) .then((response) => console.log(response.image_preview_url)) .catch((err) => console.error(err)); }); } return ( <div className='App' style={{ background: 'black' }}> <div className='container'> <div className='row'> <div className='row items mt-3'> <div className='ml-3 mr-3' style={{ display: 'inline-grid', gridTemplateColumns: 'repeat(4, 5fr)', columnGap: '10px', }} > {nftdata.map((result, i) => { return ( <div className='card mt-3' key={i}> <div className='image-over'> <img className='card-img-top' src={loadImage(result.token_id)} alt={result.token_id} /> </div> <div className='card-caption col-12 p-0'> <div className='card-body'> <h5 className='mb-0'>NFT #{result.token_id}</h5> <h5 className='mb-0 mt-2'> Location Status<p>{result.owner_of}</p> </h5> <div className='card-bottom d-flex justify-content-between'></div> </div> </div> </div> ); })} </div> </div> </div> </div> </div> );