使用react获取url到image src

Question

我试图从api调用中获得结果，并将其放入图像的src中，如<img className="card-img-top" src={loadImage(result.token_id)} alt={result.token_id} />

我从使用then(response => console.log(response.image_preview_url))的承诺中得到正确的图像src url，在控制台没有任何问题。

我的问题是我不知道它是如何从那里注入到src的。

这是我使用的相关代码:

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

Answer 1

有两种方法可以处理这个问题:

# 1 使用这种方法，您可以从函数返回响应作为url:

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第二种方法是提前获取url并将其存储在数组中或设置在同一个对象中。

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;
}