How to use a image file from a API?

April 13, 2023

I’m doing a NFT page and I’m trying to use some img from an api but it seems it returns the file image itself so how can I transform or get that path to give me the actual img.

Here is my code:

const [userData, setUserData] = useState([])

async function fetchData() {
    const { data } = await axios.get('https://us-central1-nft-cloud-functions.cloudfunctions.net/hotCollections')
    setUserData(data) 
    console.log(data)
} 

useEffect(() => {
    fetchData()
}, [])

I’m searching but I havent found a solution yet.

>Solution :

It looks like the data you’re receiving is the exact src value for an <img> element. For example, when I go to your URL, the first object in the returned array is:

{
  "id": 1,
  "title": "Abstraction",
  "authorImage": "https://nft-place.web.app/static/media/author-1.04ee784f53cbe427d362.jpg",
  "nftImage": "https://nft-place.web.app/static/media/coll-1.b8f9d867e8ed59ee7fa7.jpg",
  "nftId": 39924405,
  "authorId": 83937449,
  "code": 192
}

Those image values are simply URLs (or in some cases base64 image data, but to the browser it makes little difference), which you can use in your markup. For example:

<>
{
  userData.map(user => (
    <div key={user.id}>
      <h1>{user.title}</h1>
      <img src={user.authorImage} alt={user.title} />
    </div>
  ))
}
</>