How to get the URL of an image in the storage by its id?

I have tried the http method but obviously I'm doing something wrong. convex/http.ts

import { httpRouter } from "convex/server";
import { Id } from "./_generated/dataModel";
import { httpAction } from "./_generated/server";
import { auth } from "./auth";

const http = httpRouter();

auth.addHttpRoutes(http);

http.route({
  path: "/getImage",
  method: "GET",
  handler: httpAction(async (ctx, request) => {
    const { searchParams } = new URL(request.url);
    const storageId = searchParams.get("storageId")! as Id<"_storage">;
    const blob = await ctx.storage.get(storageId);
    if (blob === null) {
      return new Response("Image not found", {
        status: 404,
      });
    }
    return new Response(blob);
  }),
});

export default http;

import { httpRouter } from "convex/server";
import { Id } from "./_generated/dataModel";
import { httpAction } from "./_generated/server";
import { auth } from "./auth";

const http = httpRouter();

auth.addHttpRoutes(http);

http.route({
  path: "/getImage",
  method: "GET",
  handler: httpAction(async (ctx, request) => {
    const { searchParams } = new URL(request.url);
    const storageId = searchParams.get("storageId")! as Id<"_storage">;
    const blob = await ctx.storage.get(storageId);
    if (blob === null) {
      return new Response("Image not found", {
        status: 404,
      });
    }
    return new Response(blob);
  }),
});

export default http;

event-list.tsx

"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { api } from "@/convex/_generated/api";
import { useQuery } from "convex/react";
import Image from "next/image";

export default function EventList() {
  const events = useQuery(api.events.listEvents) || [];

  function getImageUrl({ storageId }: { storageId: string }) {
    const imageUrl = new URL(`${process.env.NEXT_PUBLIC_CONVEX_SITE_URL}/getImage`);
    imageUrl.searchParams.set("storageId", storageId);
    console.log(imageUrl.href);

    return imageUrl.href;
  }

  return (
          {events.map((event: any) => (
            <Card key={event._id}>
              <CardContent className="p-4">
                <Image
                  src={getImageUrl(event.imageId)}
                  alt={event.title}
                  width={300}
                  height={200}
                  className="mb-4 h-48 w-full rounded object-cover"
                />
              </CardContent>
            </Card>
          ))}
  );
}

"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { api } from "@/convex/_generated/api";
import { useQuery } from "convex/react";
import Image from "next/image";

export default function EventList() {
  const events = useQuery(api.events.listEvents) || [];

  function getImageUrl({ storageId }: { storageId: string }) {
    const imageUrl = new URL(`${process.env.NEXT_PUBLIC_CONVEX_SITE_URL}/getImage`);
    imageUrl.searchParams.set("storageId", storageId);
    console.log(imageUrl.href);

    return imageUrl.href;
  }

  return (
          {events.map((event: any) => (
            <Card key={event._id}>
              <CardContent className="p-4">
                <Image
                  src={getImageUrl(event.imageId)}
                  alt={event.title}
                  width={300}
                  height={200}
                  className="mb-4 h-48 w-full rounded object-cover"
                />
              </CardContent>
            </Card>
          ))}
  );
}

11 Replies

Convex Bot•4mo 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!

lee•4mo ago

what is process.env.NEXT_PUBLIC_CONVEX_SITE_URL ?

Seeking SolaceOP•4mo ago

It's the HTTP Actions URL. Is that not correct? The one that ends with .site

lee•4mo ago

That is correct. Are you seeing the http action getting called in convex logs? Your code looks fine to me, so i'm trying to figure out what might be going wrong

Seeking SolaceOP•4mo ago

lee•4mo ago

Ah that makes sense

Seeking SolaceOP•4mo ago

Really appreciate your time!

lee•4mo ago

Check the argument of getImageUrl Instead of {storageId}: {storageId: string} you probably want storageId: string

Seeking SolaceOP•4mo ago

Wow... Such a noobie mistake I'm so sorry.

lee•4mo ago

No worries i also missed it

Seeking SolaceOP•4mo ago

Thank you so much!

How to get the URL of an image in the storage by its id?

Did you find this page helpful?