Public Folder Assets do not work on Dynamically Generated Routes

[wthIC]

Summary

Hello,

I have been trying to use assets in the public folder in dynamically generated routes. I have tried so many different versions in "next.config.mjs", it is honestly extremely frustrating. I have tried solutions offered in different discussions, but they simply does not work.

I am using a component in dynamic pages where there is this piece of code:

<img className="img-fluid" src={project.imageLink} style={{ height: "250px" }} alt={project.title} />

project.imageLink is always relative to the public folder. So if the image is in public/assets/image.jpg, project.imageLinke = "assets/image,jpg".

However, I get the error on both localhost and when deployed with github-actions/pages that these assets cannot be retrieved. In localhost I receive these messages:

GET /gct565/GCT565_Fall2021/Team1.jpg 404 in 229ms
GET /gct565/GCT565_Fall2021/Team2.jpg 404 in 236ms

I am confused if the gct565 is supposed to be there at the start, as the project.imageLink I send is only "GCT565_Fall2021/Team1.jpg", gct565 is just the folder name for the dynamic route. Is this part of the error or should it be trying to do that in dynamic route anyways. Here is my current config for next.js:

/** @type {import('next').NextConfig} */
const isProd = process.env.NODE_ENV === 'production';
const nextConfig = {
  reactStrictMode: true,
  images: {
    unoptimized: true, // Disable default image optimization
  },
  assetPrefix: isProd ? '/updatetest/' : '',
  basePath: isProd ? '/updatetest' : '',
  output: 'export'
};

export default nextConfig;

Additional information

No response

Example

No response

[CauaYves]

Im having the same issue, I have a basepath and my images are not being loaded.

next.config.ts
`import type { NextConfig } from "next";
import CONSTANTS from "./constants";

const { NEXT_PUBLIC_CUSTOMER } = CONSTANTS.APP_ENV;
// NEXT_PUBLIC_CUSTOMER = "volta-redonda"

const nextConfig: NextConfig = {
basePath: /${NEXT_PUBLIC_CUSTOMER},
images: {
localPatterns: [
{
pathname: /${NEXT_PUBLIC_CUSTOMER}/**,
search: "",
},
],
},
async redirects() {
return [
{
source: "/",
basePath: false,
destination: /${NEXT_PUBLIC_CUSTOMER},
permanent: true,
},
];
},
};

export default nextConfig;
`

this is how the nextjs app call the images:

but, if I change the UrlPath manually, the request is succeded