Image not loading when creating a static build
Answered
Cinnamon posted this in #help-forum
CinnamonOP
production URL
https://domain.com/path/
package.json
"next": "14.1.3",
nextConfig
/ @type {import('next').NextConfig} */
const nextConfig = {
images: {
formats: ["image/avif", "image/webp"],
remotePatterns: [
{
protocol: "https",
hostname: "domain.com",
port: "",
pathname: "/path/",
},
],
},
output: "export",
assetPrefix: "/path/",
// basePath: "/path",
};
export default nextConfig;
COMPONENT
<Image
src="https://domain/path/image.jpg"
alt="test"
height="1000"
width="1000"
className="rounded-lg"
/>
COMMAND
npm run build
ERROR
GET https://dommain.com/_next/image?url=https%3A%2F%2Fdomain.com%2Fpath%2Fimage.jpg&w=1080&q=75 404 (Not Found)
THIS WORKS NO PROBLEM
<Image
src="https://domain/path/logo.svg"
alt="logo"
height="1000"
width="1000"
className="rounded-lg"
/>
THESE IMAGES LOAD FINE IN THE BROWSER
https://domain.com/path/circles.svg
https://domain.com/path/image.jpg
I've tried
public folder
relative path
absolute path
https://domain.com/path/
package.json
"next": "14.1.3",
nextConfig
/ @type {import('next').NextConfig} */
const nextConfig = {
images: {
formats: ["image/avif", "image/webp"],
remotePatterns: [
{
protocol: "https",
hostname: "domain.com",
port: "",
pathname: "/path/",
},
],
},
output: "export",
assetPrefix: "/path/",
// basePath: "/path",
};
export default nextConfig;
COMPONENT
<Image
src="https://domain/path/image.jpg"
alt="test"
height="1000"
width="1000"
className="rounded-lg"
/>
COMMAND
npm run build
ERROR
GET https://dommain.com/_next/image?url=https%3A%2F%2Fdomain.com%2Fpath%2Fimage.jpg&w=1080&q=75 404 (Not Found)
THIS WORKS NO PROBLEM
<Image
src="https://domain/path/logo.svg"
alt="logo"
height="1000"
width="1000"
className="rounded-lg"
/>
THESE IMAGES LOAD FINE IN THE BROWSER
https://domain.com/path/circles.svg
https://domain.com/path/image.jpg
I've tried
public folder
relative path
absolute path
Answered by Cinnamon
<Image
unoptimized
src="/image.jpg"
...
/>
Seems to have worked. I did run npm run build --no-lint as well. Again, thanks for the response!
unoptimized
src="/image.jpg"
...
/>
Seems to have worked. I did run npm run build --no-lint as well. Again, thanks for the response!
14 Replies
Is
domain your own Next.js application? If so you can just import the Image instead of writing the URLCinnamonOP
Hi Alfonso, thanks for the response. domain.com/path is just a reference for the destination of my next build. The hosting, domain belongs to me. I did try :
import ImageA from '/imagejpg'
<Image
src={ImageA}
...
/>
That didn't work either. I'm going to try unoptimized too. It's odd that the svg file loads with no problems, sames paths etc..
Does the destination server need to running node? Currently it's just LAMP hosting. I am going to try to make a github repo and deploy to vercel.
import ImageA from '/imagejpg'
<Image
src={ImageA}
...
/>
That didn't work either. I'm going to try unoptimized too. It's odd that the svg file loads with no problems, sames paths etc..
Does the destination server need to running node? Currently it's just LAMP hosting. I am going to try to make a github repo and deploy to vercel.
CinnamonOP
<Image
unoptimized
src="/image.jpg"
...
/>
Seems to have worked. I did run npm run build --no-lint as well. Again, thanks for the response!
unoptimized
src="/image.jpg"
...
/>
Seems to have worked. I did run npm run build --no-lint as well. Again, thanks for the response!
Answer
@Cinnamon Hi Alfonso, thanks for the response. domain.com/path is just a reference for the destination of my next build. The hosting, domain belongs to me. I did try :
import ImageA from '/imagejpg'
<Image
src={ImageA}
...
/>
That didn't work either. I'm going to try unoptimized too. It's odd that the svg file loads with no problems, sames paths etc..
Does the destination server need to running node? Currently it's just LAMP hosting. I am going to try to make a github repo and deploy to vercel.
Image optimisation only works with a running server or on platforms like Vercel. If you are hosting the app statically, image optimisation doesn’t work
CinnamonOP
Gotcha. So, I added two more Image components using the unoptimized attribute and now the one that didn't load loads and the two new ones do not after build and upload. Emptying cache, hard reload etc..
Changes to the public folder take another deployment to take effect. So you can’t simply save images to the public folder and expect it to work immediately – a redeploy is required
CinnamonOP
Yes, like I said I added the images and they render local. Then I ran the build and uploaded the same out generated to the server.
Well, this is too little info for me to make any guesses. It’s best to open a new thread
Transvaal lion
just curious, what is the benefit of specifying image formats in next config? can't next handle any format?
Please create a new thread if you have any question
Wuchang bream
Maybe we have the same problem, My svg image can shown well in dev mode, but after npm run build, they are not displayed
Maybe, but were not sure untill you share some more information. Thats why, please create a new thread
@ᴉuɐpɹɐɐ https://nextjs.org/docs/app/api-reference/components/image#formats
Transvaal lion
thanks! i get it now =]