Uploading an image using cloudinary, and displaying it to the UI

Question

I am currently working on a project that is social media based, I'm currently using cloudinary to upload my images, which is working great; the trouble is fetching the images from cloudinary to display. I want to receive images back for posts and user related activity such as avatars. I've watched a few tutorials and read some documentation but nothing seems to be working. I'll post my code below, and any help would be greatly appreciated!!! :). current error message received .... failed to fetch, and syntax error unexpected token at json position [0]. I've tried so many different ways of building this out it's not working

import React, { useEffect, useState } from 'react';
import { Image } from 'cloudinary-react';


export default function UploadHome() {
    const [imageIds, setImageIds] = useState();
    const loadImages = async () => {
        try {
           const res = await fetch('/api/images');
           console.log(res)
             const data = await res.json();
            setImageIds(data);
        } catch (err) {
            console.error(err);
        }
    };
    useEffect(() => {
        loadImages();
    }, []);
    return (
        <div>
            <h1 className="title">Cloudinary Gallery</h1>
            <div className="gallery">
                {imageIds &&
                    imageIds.map((imageId, index) => (
                        <Image
                            key={index}
                            cloudName={process.env.REACT_APP_CLOUDINARY_NAME}
                            publicId={imageId}
                            width="300"
                            crop="scale"
                        />
                    ))}
            </div>
        </div>
    );
}

Answer 1

try {
      const res = await fetch('/api/images');
      console.log(res)
      const data = await res.json();
            setImageIds(data);
    } catch (err) {
      console.error(err);
    }