I'm trying to get the result from an api call and put it into the src of an image like so <img className="card-img-top" src={loadImage(result.token_id)} alt={result.token_id} />
I get the correct image src url back from the promise using then(response => console.log(response.image_preview_url)) no problem at all in console.
My problem is I can't work out how it injects into the src from there.
This is the relevant code I'm using:
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>
);
There are two ways for you to deal with this:
#1 With your approach, you can return the response as url from your function:
async function loadImage(token_id) {
const options = {method: 'GET'};
const response = await fetch('https://api.opensea.io/api/v1/asset/0xc782ab25dac76565d3fdede36fcf87227c9217da/'+token_id+'/?include_orders=false', options);
return response.image_preview_url;
}
#2 The second approach is to get the URLs before hand and store in an array or set in the same object.
function fetchAllImageUrls(){ // Call this in useEffect(fetchAllImageUrls, nftdata)
const newNftdata = nftdata.map((result, i )=> {
return {
...result,
image_preview_url: loadImage(result.token_id)
};
});
setNftData(newNftdata);
}
async function loadImage(token_id) {
const options = {method: 'GET'};
const response = await fetch('https://api.opensea.io/api/v1/asset/0xc782ab25dac76565d3fdede36fcf87227c9217da/'+token_id+'/?include_orders=false', options);
return response.image_preview_url;
}