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

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

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;

"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

4 Replies

Convex Bot•3mo ago

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!

DylanDevOP•3mo ago

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

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

lee•3mo ago

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

DylanDevOP•3mo ago

Thank you @lee!