Help with loading images from image id in a table and image sitting in the Files

import { v } from "convex/values";

import { mutation, query } from "./_generated/server";
import { Doc, Id } from "./_generated/dataModel";

export const get = query({
    handler: async (ctx) => {
        const levels = await ctx.db.query("levels").collect();

        return levels;
    }
});

import { v } from "convex/values";

import { mutation, query } from "./_generated/server";
import { Doc, Id } from "./_generated/dataModel";

export const get = query({
    handler: async (ctx) => {
        const levels = await ctx.db.query("levels").collect();

        return levels;
    }
});

"use client";

import { api } from "@/convex/_generated/api";
import { useQuery } from "convex/react";
import Image from "next/image";

const GameModesPage = () => {
    return ( 
        <div>
            <Image src={imageSrcUrl} />
        </div>
    );
}
 
export default GameModesPage;

"use client";

import { api } from "@/convex/_generated/api";
import { useQuery } from "convex/react";
import Image from "next/image";

const GameModesPage = () => {
    return ( 
        <div>
            <Image src={imageSrcUrl} />
        </div>
    );
}
 
export default GameModesPage;