Get url into image src using react

Question

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

Return the actual response.image_preview_url from your async function. It seems like you are NOT returning anything to your src — Always Helping
– Always Helping, Commented Jun 7, 2022 at 6:12
I tried what you said by changing .then(response => console.log(response.image_preview_url)) to .then(response => response.image_preview_url) and it gives me <img class="card-img-top" src="[object Promise]" alt="1"> — user100911
– user100911, Commented Jun 7, 2022 at 6:59

subodhkalika · Accepted Answer · 2022-06-07 06:18:47Z

1

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

answered Jun 7, 2022 at 6:18

subodhkalika

2,3151 gold badge11 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user100911 Over a year ago

I tried your first method by replacing the loadImage function with what you suggested and no urls are appearing in src. I added 'console.log(response.image_preview_url);' to the function to check what it was getting and it says 'undefined' in console. I then tried I added 'console.log(response);' and there is no json returned at all. When I was using my original loadImage function it was returning the url in console though

user100911 Over a year ago

so it does need the json bit at the end of the url. I changed your suggestion to

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).then(response => response.json()) 	console.log(response.image_preview_url); 	return response.image_preview_url; 	}

. It returns the url in console but when examining the image using browser inspect I see this <img class="card-img-top" src="[object Promise]" alt="1">

subodhkalika Over a year ago

@user100911 Please remove .then and check. When you use await, you do not need to use .then.

Collectives™ on Stack Overflow

Get url into image src using react

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related