Using API to import Chicago Art Institute using react typescript

Issue

I am having an extremely hard time trying to import a list of image details on my react application from the Chicago art institute. I struggle a lot understanding API, so a detailed answer would be helpful. As of now, I do understand the code I need for the image list I want, but I am stuck at this code below on making it do what I want with the link provided from the Chicago art documentation. I would like for the API to pop up on the website if possible.

import { Navbar } from '../Navbar';
import Real from '../../assets/images/scream.jpeg'
import { makeStyles } from '@material-ui/core';

const useStyles = makeStyles({
    background: {
        backgroundImage: `linear-gradient(rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%), url(${Real})`,
        width: '100%',
        height: '100%',
        backgroundSize: "cover",
        backgroundRepeat: "no-repeat",
        backgroundPosition: "center",
        position: "absolute",
        zIndex: -1,
    },
    main_text: {
        textAlign: 'center',
        position: 'relative',
        top: '70%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        color: 'white',
    }
})

async function getArt() 
{
  let response = await fetch(`https://api.artic.edu/api/v1/artworks?ids=208131,240935,142595,120300,13454,151363,102611,191556,117266,137125,126414&fields=id,title,image_id`);
  let data = await response.json()
  return data;
}

getArt()
  .then(data => console.log(data)); 

  

  

export const Art = () => {
const classes = useStyles();

  return (
    <>
    <Navbar />
    <div className={`${classes.background}`}>
    <div className={classes.main_text}>
    <div></div>
        </div>
        </div>
    </>
  )
}

Solution

Here is a minimalistic implementation. You retrieve data from API, then set your img's src attribute to the API's response.

import React, { useEffect, useState } from "react";
const imageUrl = "https://api.artic.edu/api/v1/artworks?ids=208131,240935,142595,120300,13454,151363,102611,191556,117266,137125,126414&fields=id,title,image_id";

export default function App() {
  const [img, setImg] = useState<string | undefined>(); 

  const fetchImage = async () => {
    const res = await fetch(imageUrl);
    const imageBlob = await res.blob();
    const imageObjectURL = URL.createObjectURL(imageBlob);
    setImg(imageObjectURL);
  };


  useEffect(() => {
    fetchImage();
  }, []);

  const classes = useStyles();

  return (
    <>
      <Navbar />
      <img src={img} alt="icons" />
      <div className={`${classes.background}`}>
        <div className={classes.main_text}>

          <div></div>
        </div>
      </div>
      
    </>
  );
}

Cheers

Answered By - l -_- l