Images from public folder not loading in dynamic path

[OgLuka]

Hi guys , I already created and described my problem on StackOverflow and no one is answering yet , pls check https://stackoverflow.com/questions/72886839/next-js-image-from-public-folder-not-loading-on-dynamic-paths

[icyJoseph]

Hi,

A few things:

• You can use images located in the public folder by just doing:

<img src="/image-name.png" alt="..." />

Next.js knows that static assets are in the public file, so you can skip saying /public/image-name, please refer to this page, https://nextjs.org/docs/basic-features/static-file-serving.

• If you want to have the SVG files as React components you can do that, by using svgr as documented here, https://react-svgr.com/docs/next/

Now into the issue, do you have a middleware file? What Nextjs version are you using? I tried with 12.2.0, and it works fine. Do you have a reproduction repo?

[icyJoseph]

Mmm nope, can't get it to break.

Please try to reproduce as small as possible. You can use the Next.js template from https://stackblitz.com/, and share that, it'll make it faster.

[icyJoseph]

only in the dynamic route and i wanted to know why is that.

I also want to know what's going on there, but I can't get it to break.

[OgLuka]

Okay i will try recreating it here , Thanks for your time. i'll post it here when i'm done.

[icyJoseph]

No worries, we'll figure this out!

[zourdyzou]

@icyJoseph I kinda have the same issue, and you mentioned in the above statement that the middleware might also cause it? Could you please explain to me what is the best way to fix it?

[OgLuka]

Sorry for the wait. so i recreated it here and it worked somehow idk why https://stackblitz.com/edit/nextjs-cavc5g?file=pages%2F_app.js,components%2FNavbar.js,pages%2Fsomething%2Fsomething1%2F[id].js,pages%2Findex.js,package.json
so because i still don't know what the problem is i created public repo and uploaded my project . it would mean the world if u could check it.
https://github.com/OgLuka/NextTest.git

[icyJoseph]

Hi

The issue is the path used for images in the Next.js config file.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    loader: "akamai",
    path: "", // <----- THIS IS THE ISSUE
  },
};

module.exports = nextConfig;

You should have the path set to /

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    loader: "akamai",
    path: "/",
  },
};

module.exports = nextConfig;

Why does it happen only on dynamic routes? Well it doesn't just happen in dynamic routes. It happens because of the path depth.

If you create pages/register/foo.js, the same issue happens.

The above is key because, when the path in next.config.js is set to '', the paths become relative to the parent of the current page, AKA, as the current directory. If you are in http://localhost:3000/register, then the current directory is /, once we dive one step in depth, into register http://localhost:3000/register/foo, now the current directory is register, and there's no SVG's there.

https://stackoverflow.com/a/7613355

Using the path: '/', ensures that URLs are absolute, that is, relative to the root of the site.

Details of implementation

If you must know why:

The akamai loader looks like:

function normalizeSrc(src: string): string {
  return src[0] === '/' ? src.slice(1) : src
}

function akamaiLoader({
  config,
  src,
  width,
}: ImageLoaderPropsWithConfig): string {
  return `${config.path}${normalizeSrc(src)}?imwidth=${width}`
}

When the src starts with /, the normalise function removes it, and then the akamai loader, joins the path (empty string), with the src without leading slash and the query. Now the path is relative to the current directory, and not to the root of the project. The fix is to include a path equal to /.

Bonus

There's this piece of JSX in the NavBar:

  <Link href="/abiplatform">
         <Image src={SquareLogo} alt="brandergate square logo" />
  </Link>

Wrap the image with an anchor tag.

[OgLuka]

Understood everything thanks so much, so why did my next create image without "/" in it? or it is not default. anyways thanks again for your time , i'll change this and continue working on my project.

[icyJoseph]

It's because the config was telling it to not use the default loader, but the akamai, and the path was set to empty string.

[OgLuka]

Oh okay!

[bucky0112]

const nextConfig = {
  reactStrictMode: true,
  images: {
    loader: "akamai",
    path: "/",
  },
};

When I set / to path, it will show public image in dynamic path, but image url from fetch API, also plus / on image src.

[hamonCordova]

Some solution? Same here

[hamonCordova]

The solution that i had is removing '/' from path in images nextConfig. And add a '/' + image.src on all public assets. This way, all the external and internal images will be rendered correctly.
It's boring to do it, but was my solution.

[bucky0112]

I’m forgot how to fix it, but I give up use path. 

…

Muhammad Zourdy ***@***.***> 於 2022年11月22日 上午11:11 寫道： @icyJoseph <https://github.com/icyJoseph> I kinda have the same issue, and you mentioned in the above statement that the middleware might also cause it? Could you please explain to me what is the best way to fix it? — Reply to this email directly, view it on GitHub <#38382 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALXWZZ7QD45JPP7DOA64B73WJQ2X3ANCNFSM522NWNUQ>. You are receiving this because you commented.

[ifismailkhan]

Next.js can serve static files, like images, under a folder called public in the root directory. Files inside public can then be referenced by your code starting from the base URL (/).

For example, if you add me.png inside public, the following code will access the image:

`import Image from 'next/image'

export function Avatar() {
return
}`

[Pnlvfx]

Next app router has a serious problem in production when you try to access the image from the public folder from the url, it just fall to 404. I tried to report it but they close the issue. Try it!

[daviancode]

Yes, that's absolutely right.
When I deploy to the production client, the public path cannot reload new files.
Please, anyone, help me!

[jean1190]

It's as intended unfortunately. It's static and not dynamic.

[Wimmind]

I have the same problem, but even in development mode, if I specify src='file.png' in the Image, and it will lie on the path public/file.png, then the error 404 not found occurs. help!!!

[Pnlvfx]

I have the same problem, but even in development mode, if I specify src='file.png' in the Image, and it will lie on the path public/file.png, then the error 404 not found occurs. help!!!

This is not the same problem.
You have to write src='/file.png'.

[daviancode]

finally, i'm using api to render image in Production

src='/api?filename=file.jpeg'

import fs from 'fs';
import { NextRequest, NextResponse } from "next/server";

export async function GET(req: NextRequest) {
    try {
        const filename: any = req.nextUrl.searchParams.get("filename");
        const blob = fs.readFileSync(`${process.cwd()}/public/${filename}`);
        return new NextResponse(blob, {
            headers: {
                'Content-Type': 'image/jpeg',
            }
        })
    } catch (error) {
        return NextResponse.json({ error: error })
    }
}

[Pnlvfx]

No that’s not what I mean. Using next is canary latest release and Vercel I wasn’t able to access images from the browser, in development my images were correctly shown, but in production a 404 appears when I tried to access the images from browser. I didn’t make much debugging because I was in production and so I had to switch to cloudinary. However on my side I didn’t make a lot of stuff that could have broken the public dir, so if you can take a look at it and tell me if was my issue or if there is an issue related. Or maybe vercel? Because in development everything works fine! If you don’t understand what I mean, I can access the images using the next image component, but then it happens that I use an image as og_image and when I went to check if it was correctly displaying on the browser, it wasn’t instead there was a 404 error with some strange messages, I also had open an issue but was closed as it was without repro. Sorry I’m not English, I hope you understand my issue. Inviato da iPhone On Aug 22, 2024, at 6:24 PM, jean1190 ***@***.***> wrote:  It's as intended unfortunately. It's static and not dynamic. — Reply to this email directly, view it on GitHub<#38382 (reply in thread)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AWIQD3LYCM3CYYSD47T5NLTZSYGEVAVCNFSM522NWNU2U5DIOJSWCZC7NNSXTOSENFZWG5LTONUW63SDN5WW2ZLOOQ5TCMBUGIYTKNRR>. You are receiving this because you commented.Message ID: ***@***.***>

[jean1190]

I thought I had the exact same problem. The thing is, the "public" path cannot reload new files in prod even if it works in dev.

Sorry if I missunderstood your issue.

[Pnlvfx]

I didn’t change it in production Inviato da iPhone On Aug 22, 2024, at 6:43 PM, jean1190 ***@***.***> wrote:  I had the exact same problem. The thing is, the "public" path cannot reload new files in prod even if it works in dev. — Reply to this email directly, view it on GitHub<#38382 (reply in thread)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AWIQD3PMNMYQKHIUWB3YJ6DZSYIMXAVCNFSM522NWNU2U5DIOJSWCZC7NNSXTOSENFZWG5LTONUW63SDN5WW2ZLOOQ5TCMBUGIYTONZZ>. You are receiving this because you commented.Message ID: ***@***.***>

[fadilkun45]

any update for this problem ? in nextJS 15 its same too i tried config next.config.ts but nothing happened

here of my last config

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  basePath: "/tm"
  output: "standalone",
  images: { unoptimized: true, path:  "/" },
  eslint: {
    ignoreDuringBuilds: true,
  },
};

export default nextConfig;