Next.js Discord

Discord Forum

Getting url from posgres vercel database to use in <Image /> tag

Answered
Burmese posted this in #help-forum
Open in Discord
BurmeseOP
I'm' making a web app in Next.js and typescript with vercels postgres as a database. I have several movies in a table with various information. I want to get the poster url from the database and put it as the src in my <Image /> tag on the main page.
I can get a hold of the information by doing this in my actions.ts file:

import { sql } from "@vercel/postgres";

export async function posters(i: number) {
const allPosters = await sqlSELECT poster FROM hardcoded_movies;
console.log(${allPosters.rows[i].poster});

I have tested this by importing posters in a button components. and pressing the button like this: posters(2) //or 0 or any other index.
I get the url I want in the terminal. Now I want to import this in the Card component wich holds the <Image /> tag. I have imported it to the Card component, tried using it in different ways fx: <Image src={posters(0) /> , tried setting it to a variable: const poster = posters(0) That gives me this error in VS Code:
Type 'Promise<void>' is not assignable to type 'string | staticImport'.

I set const poster = posters(0).toString() and thisgives me this error:
Error: Failed to parse src "[object Promise]" on next/image, if using relative image it must start with a leading slash "/" or be an absolute URL (http:// or https://)

How can I solve this? Am I approaching this all wrong?
Answered by Ray
hi, posters return a promise, so you need to await it. try
const src = await posters(0)
<Image src={src} />
View full answer

24 Replies

Answer
BurmeseOP
That gives me: 'await' expressions are only allowed within async functions and at the top levels of modules.
you can make the component async if its a server component
BurmeseOP
Yeah, but I'm not sure it has to be one though.
Removing "use client" didn't change anything though.
Ray
did you turn the component to async?
BurmeseOP
Do I need to turn the entire card component to async?
@Burmese Do I need to turn the entire card component to async?
Ray
yes if you are calling posters in it
BurmeseOP
Okay, now it returns void. Do I need to do toString too?
Ray
do you return anything in posters function?
export async function posters(i: number) {
  const allPosters = await sql
  SELECT poster FROM hardcoded_movies;
  console.log(${allPosters.rows[i].poster});
  return allPosters.rows[i].poster
}
BurmeseOP
No, should I?
Ray
yes you need to return it
BurmeseOP
Okay, I got some weird errors when I did that earlier but that was before the changes we made.
BurmeseOP
Okay, now I get a completely different error: Event handlers cannot be passed to Client Component props.
<button class name=... onClick={function} children=...
try to use posters function in server component and pass the result down
BurmeseOP
the error is coming from buttons that I have imported into the Card component. They are client components so that I can have onClick on them.
Ray
yes, in this case, your Card component need to be client component
so fetch the url in server component, and pass the result to Card component
or turn the button to client component instead
BurmeseOP
The buttons are client components. And somehow all the errors disappeared and now it works 😄. Thank you so much, I have been struggling with this for a week