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

[wanton halo]

I'm making a next.js/react app using typescript.

I have a query to get every level:

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;
    }
});

Then I want to set an image to have the src of this image sitting in the files:

"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;

Can anyone help me do this? I am a little confused on the documentation

[short topaz]

Thanks for posting in #1088161997662724167.
Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets.

• Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.)
• Use search.convex.dev to search Docs, Stack, and Discord all at once.
• Additionally, you can post your questions in the Convex Community's #1228095053885476985 channel to receive a response from AI.
• Avoid tagging staff unless specifically instructed.

Thank you!

[wanton halo]

I've gotten it figured out but now I'm getting an error saying that getUrl is deprecated. How do I fix this?

export const getImageSrc = query({
    handler: async (ctx) => {
        const level = await ctx.db.query("levels").first();

        if(!level) {
            throw new Error("No levels exist");
        }

        const imageUrl = await ctx.storage.getUrl(level.imageId);
                                           ^ ERROR ON THIS LINE
        return imageUrl;
    }
});

[gentle compass]

getUrl is supported for arguments of type Id<"_storage"> and deprecated for other arguments. The schema for "levels" should have imageId: v.id("_storage"), or you can cast in typescript