-1

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.

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
Rudis Gomez
  • 17
  • 4
  • 2
    It "returns the image itself" but you want to "get the actual image"? It's not clear to me what you're trying to describe. Can you clarify specifically what isn't working as expected in the code shown? – David Apr 13 '23 at 12:04
  • The code is working, but when i get the data from the api it gives me the file of the img so i dont know how to use it – Rudis Gomez Apr 13 '23 at 12:08
  • They are providing base64 image. So you can use base64 in ```src``` attribute of `````` tag itself – Srushti Shah Apr 13 '23 at 12:09

1 Answers1

0

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>
  ))
}
</>
David
  • 208,112
  • 36
  • 198
  • 279