-
Notifications
You must be signed in to change notification settings - Fork 26.7k
-
Notifications
You must be signed in to change notification settings - Fork 26.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
_next/image 404 on next build && next export #18356
Comments
same for me. On localhost it's ok but not on Netlify |
I guess it probably requires the node server. Also Passing the unoptimized prop should fix that, but at the expense of losing most of the benefits (no srcset added). |
The image component would have to have some sort of static generation mode, where it would function like gatsby-image, and generate the optimized image at build time. I think if you are using some sort of external service, such as Imgix, this shouldn't be an issue for built times, as it should be able to just generate the urls needed, and doesn't need to actually generate the images themselves. I haven't used it, but I think the react-imgix component does this today. |
I believe the solution here is to fail |
I am having this problem as well trying to deploy on Netlify. Could anyone explain why this doesn't show up after exporting and running |
@Timer that should be listed on the documentation as well. I had the same realization as everybody here, I thought that the image would just work. |
I tried to use |
This post helped me understand and compare |
Any solution to this? |
@Jaynam07: I ended up not using |
We'll need to add something like this to if (!options.buildExport) {
const isDefaultImageLoader =
!nextConfig.images.loader || nextConfig.images.loader === 'default'
if (isDefaultImageLoader) {
Log.error(
"next export cannot be used with Next.js' default image loader, as it relies on `next start`."
)
// stop export ...
}
} However, it's tricky because we cannot error for projects that don't use |
So I take it the Next Image component will generate the correct URLs/srcsets from Cloud providers which have their own loader. In which case, next export and next/image will be fine. For those of us serving from a CMS which does not have its own loader in Next/Image, can we expect them to be added in the future? Many CMS CDNs also have on-the-fly image optimization. As it stands, Cloudinary/Imgix/Akamai loaders are baked into the component, but it wouldn't really be feasible to add loaders for all the other providers like that. |
That will show an error during EDIT: I made a feature request here: #19065 (Optimize images during |
The discussion is at #19065, specifically. The maintainers are using 👍s on the discussion to gauge interest. Please 👍 it if you've run into this. |
This comment has been minimized.
This comment has been minimized.
any update about this bug? Just got an error when tried next/image in NextJS 10
Is there |
Please check your image src if you are using |
One thing that's important to clarify here: As mentioned above, there's an open issue for running image optimization at build time. Just wanted to clarify the discussion here 😄 |
Did you ever find a solution, or is there one? I am having the same issue on Heroku |
Same here, can't export anything at the moment with aws-amplify. |
I stopped using |
Guess I'll use the same approach. |
I just ran into this on Heroku and noticed my logs had something like:
See: heroku/heroku-buildpack-nodejs#727 After I disabled Hope this helps. |
I deployed my app on Vercel and it works fine there. But again it depends on the use case since we have different needs. If you don't mind switching platforms you can try Vercel. If it's not possible for you then |
using next-optimzed-images in next.config.js but still error
info - No "exportPathMap" found in "next.config.js". Generating map from "./pages" |
+1 Still have the error. |
Anyone has resolved this issue? Still have this error after export. |
@JYeop I switched to vercel for hosting. Solved the issue for me |
After a quick look it seems you misinterpreted your solution. If you want to do |
This is how I made // next.config.js
module.exports = {
reactStrictMode: true,
+ images: {
+ loader: "custom",
+ },
};
// components/Image.js
import NextImage from "next/image";
const customLoader = ({ src }) => {
return src
}
export default function Image(props) {
return (
<NextImage
{...props}
loader={customLoader}
/>
);
} // pages/index.js
- import Image from 'next/image'
+ import Image from 'components/Image'
export default function Home() {
return (
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
)
}
|
This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
Bug report
Describe the bug
Images are 404 on next build && next export. Works properly next build && next start
To Reproduce
Screenshots
System information
The text was updated successfully, but these errors were encountered: