#Display Local Images

11 messages · Page 1 of 1 (latest)

drifting patio
#

Any idea how to solve the error "could not load local resource..."? I'm trying to display an dynamic image by ID. ```ts
import { readFileSync } from "node:fs";
import { join } from "node:path";

import BaseParams from "@/types/BaseParams";
import Image from "next/image";

type PageParams = BaseParams<{ imageId: string }>;

function Page({ params }: PageParams) {
const path = join(process.env.UPLOAD_PATH, params.imageId);

return (
    <main className="main">
        <h1>{params.imageId}</h1>
        <Image src={path} alt={params.imageId} width={500} height={500} priority={true} />
    </main>
);

}

export default Page;

junior gazelleBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

woeful flare
#

Print out the process.env.UPLOAD_PATH and that path variable and show me how it looks like

drifting patio
woeful flare
#

Yeah, don't try to load files outside the project. Move that file inside your project or upload it online and use the link

drifting patio
#

So there is no way to access that file? I'm making a image uploader, that's why I have to access them dynamically.

#

Later on, they will be as URL, as I'll upload them to my CDN. But for developing, is there not a way to test it?

woeful flare
#

If not sure if there is a good way to do it honestly since i have never done it.

dark wedge
#

So while you technically have a url for your file with the file:// protocol, it won’t work

drifting patio
#

Oh okay, ty