how to display an uploaded image? [beginner]

PLEASE, RESPOND WITH CODE ONLY, no reference to links that would further complicate things for a beginner

7 Replies

I want to use convex dashboard to upload an image and get it stored as a value for one of my table instances. Here's the table:

taskOneTitles: defineTable({
    name: v.string(),
    category: v.optional(v.string()),
    questionDesc: v.optional(v.string()),
    questionType: v.optional(v.string()),
    chartData: v.string(), // How to get img for this
  }),

Here's the query as described in the docs:

`import { query } from "./_generated/server";

export const getTaskOneEssays = query({
    args: {},
    handler: async (ctx) => {
        const taskOneEssay = await ctx.db.query('taskOneTitles').collect();

        return Promise.all(taskOneEssay.map(async (essay) => {
            const imageUrl = await ctx.storage.getUrl(essay.chartData);

            return {
                ...essay,
                chartData: imageUrl,
            }
        }))
    }
});

Here's where I want to display it: export function TestCardTaskOne({ className, ...props }: CardProps) { const taskOneEssays = useQuery(api.taskOne.getTaskOneEssays); if (!taskOneEssays) { return <div>Loading...</div>; } return ( <> {taskOneEssays.map((essay) => ( <Card key={essay._id} className={cn( "w-380px hover:shadow-xl cursor-pointer shadow-none dark:shadow-slate-700 group snap-center focus:outline-none", className )} {...props} > <CardHeader className="grid items-center pt-10 space-y-0 "> <CardDescription className="flex justify-between text-base"> <p className="line-clamp-5 pl-4 font-heading leading-6 w-full text-card-foreground"> {essay.name} </p> </CardDescription> <p>Supportive task question description.</p> </CardHeader> <CardContent> {essay.chartData && ( <Image alt="Chart Data" src={essay.chartData} width={300} height={300} /> )} </CardContent> </Card> ))} </> ); }` Please, give me an answer in a code sample, no referrals to links that would further complicate the process. BTW, I am using NextJs

lee•15mo ago

Sorry, sometimes it's difficult to just "fix code" without all the context. Can you describe what you are observing? I don't see anything obviously wrong with the pasted code, so having the error message from browser console or convex dashboard may help. Or maybe the issue is with how the image is being uploaded, so you could share the mutation that sets chartData

KomaSattarovOP•15mo ago

BTW, this code is working when I used <img /> instead of <Image /> from next/image:

return (
    <>
      {taskOneEssays.map((essay) => (
        <Card
          key={essay._id}
          className={cn(
            "w-380px hover:shadow-xl cursor-pointer shadow-none dark:shadow-slate-700 group snap-center focus:outline-none",
            className
          )}
          {...props}
        >
          <CardHeader className="grid items-center pt-10 space-y-0 ">
            <CardDescription className="flex justify-between text-base">
              <p className="line-clamp-5 pl-4 font-heading leading-6 w-full text-card-foreground">
                {essay.name}
              </p>
            </CardDescription>
            <p>Supportive task question description.</p>
          </CardHeader>
          <CardContent>
            {essay.chartData && (
              // eslint-disable-next-line @next/next/no-img-element
              <img src={

${essay.chartData}

} width={300} height={300} alt="chart image" />
            )}
          </CardContent>
        </Card>
      ))}
    </>
  );

Here's the error msg I am getting when I use Image from next/image:

Unhandled Runtime Error
Error: Invalid src prop (https://utmost-ferret-183.convex.cloud/api/storage/ab8dbe9d-7c43-41b2-b644-434fce701fd5) on

next/image, hostname "utmost-ferret-183.convex.cloud" is not configured under images in your next.config.js


See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

lee•15mo ago

that error message is pretty informative. do you have a next.config.js file and what does it look like?

KomaSattarovOP•15mo ago

Here's what GPT says: The runtime error you're encountering indicates that Next.js is trying to optimize an image hosted on a domain that has not been listed in the next.config.js configuration file. Next.js requires you to specify which domains are allowed to host images for the Image component to process them. To resolve the error, you need to update your next.config.js file to include the domain utmost-ferret-183.convex.cloud in the images.domains array. Here's an example of how you could modify your next.config.js:

module.exports = {
  images: {
    domains: ['utmost-ferret-183.convex.cloud'],
  },
  // ... other Next.js config
};

After adding the domain to the config file, restart your Next.js server for the changes to take effect. This should resolve the error and allow Next.js to optimize images from the specified domain. AND, here's my config:

/** @type {import('next').NextConfig} */
const nextConfig = {}

module.exports = nextConfig

lee•15mo ago

i know you don't like reading links, but have you taken a look at the link in the error message you're getting here's the code you might want for next.config.js:

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'utmost-ferret-183.convex.cloud',
        port: '',
        pathname: '/api/storage/**',
      },
    ],
  },
}

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'utmost-ferret-183.convex.cloud',
        port: '',
        pathname: '/api/storage/**',
      },
    ],
  },
}

KomaSattarovOP•15mo ago

LOL, you are a savage, but thank you. Like, thank you very very much! And, happy new year!!!

how to display an uploaded image? [beginner]

Did you find this page helpful?