I'm starting my studies in Next.js and managed to develop a relatively simple website, my problems started when I did a next export to make the website available on my client's hosting.
The problem is with the image paths. My settings are these:
File next.config.js
module.exports = ({
basePath: '/sitenext'
}
My image
<Image
src="/assets/images/logo.webp"
alt="Logo"
width={96}
height={116}
/>
The path of the image generated in HTML is this
/_next/image?url=%2Fassets%2Fimages%2Flogo.webp&w=384&q=75
After configuring basePath, works perfectly, only images that have not loaded correctly.
I also tried the root of the host and was also unsuccessful.
Locally everything works perfectly in both dev and start mode.
Thanks a lot for the help
Related
I am trying to use next/image to load local images as well as remote images. I have my local images in public/assets/images and remote images in AWS S3. I want to use a placeholder image (from local) before uploading the image, and then after the upload, replace it with the remote image.
I have added domains in my next.config.js:
const withPlugins = require('next-compose-plugins')
const nextTranslate = require('next-translate')
const nextConfig = {
...
images: {
domains: ['xxx.amazonaws.com'],
},
...
}
module.exports = withPlugins([nextTranslate], nextConfig)
But still, it proxies it with localhost and returns The requested resource isn't a valid image.
I tried adding path and loader along with domains in the config, but then it loads all the images from the given path, be it remote or local.
I can use the img tag for it but I wish to use next/image for image optimization. Is it possible?
I just ran into this problem and this is how I solved it. In your project's next.config.js file, add the list of domains where your site may be pulling images from. This would include localhost, the domain your site is on when deployed, and an external site. Then set the loader to custom.
// next.config.js
module.exports = {
images: {
domains: ['localhost', 'yourdomain.com', 'externaldomain.com'],
loader: 'custom'
}
}
Then in your code, for each image make sure you set the loader attribute and the correct src. Then for your local images set up your custom loader this way.
<Image loader={({src}) => src} src="/logo.png" layout="fill" />
Thank you to Hughes' above comment and the issue they linked for helping me figure this out.
I've built out a new site in Next.js and have deployed it on vercel.com (their free Hobby plan).
Everything works except that I built out some sample pages and put them into /public (as instructed by the Nextjs docs) so I have a directory structure as follows:
/public/demo/gencenter/gencenter.html which I'm expecting to be visible on
https://cfsnap.com/demo/gencenter/gencenter.html
but I'm getting a 404 (the console reports "failed to load resource.... 404")
Anyone know if a Next.js has any handles I should jiggle to make static files load? For giggles I put a few image files in the /public directory and I can call them directly and they appear as expected:
https://cfsnap.com/demo/gencenter/swimCalendar.png
I read about naming conflicts in the Next.js docs but "gencenter.html" is unique and doesn't exist anywhere else.
Any help would be greatly appreciated.
Rich
Vercel uses clean urls, causing the file "index.html" to be renamed to "index". When I updated my internal links to point to "index" everything started working again. Only applies to html files apparently, CSS and image files remain unaffected.
https://vercel.com/docs/configuration#project/clean-urls
I have a bunch of images in a hidden gallery, only shown when a user clicks on a certain button.
On the development server, everything is fine, no errors or issues, but when I deploy my website and open the gallery the images don't show and throw a 404 error in the console (I included the required props).
When I replace the <Image/> component with <img>, everything is fine on the development server and live. Can anyone please help? I searched a lot and I didn't find anything like this issue.
My solution:
I had the same issue and solved it by renaming the image file names.
How the issue arose:
I had renamed the images, only changing uppercase to lowercase letters. This resulted in the files being wrongly named in my github repository. After a rename with new characters, the files were correctly updated on github.
Image Optimization using Next.js' default loader is not compatible with next export.
Possible solutions:
Use next start, which starts the Image Optimization API.
Use Vercel to deploy, which supports Image Optimization.
Configure a third-party loader in next.config.js.
That means: Only assets that are in the public directory at build time will be served by Next.js. Files added at runtime won't be available
To solve this problem. I just used next-optimized-images for static image and next/image for images from the cloud.
Kindly read this article for more understanding: https://dev.to/jameswallis/next-image-and-next-optimized-images-a-brief-comparison-4c4i
Create a folder on root call it 'static' which is bassically /static/imagename.png
Set the source to the image like so;
<img src="/static/imagename.png" />
This should load the static image in file both in dev environment and build file.
I just installed Jekyll and generated a new site and modified almost nothing of the default configuration.
I can serve it well locally.
But when I push the source code to Github Pages or deploy it on Gitlab with a build script, I have the same result: the CSS doesn't load.
I haven't changed anything in the layout. I thought this would be the kind of feature that should work by default.
The repo:
https://github.com/bmrejen/jekyll_blog
The Github Pages:
https://bmrejen.github.io/jekyll_blog/
It says
"Could not find the original style sheet."
Try to add this in jekyll_blog/_config.yml
baseurl: /PROJECT
url: http://USERNAME.github.io
I saw in your history you deleted the URL & baseurl and insert it wrong.
If you still can't understand how to insert, you can watch this tutorial, it's cover it:
Hosting on Github Pages
I'm trying to load a React app onto an asp.net view (project was initially written in asp.Net, am creating new pages using React for learning purposes and for fun).
When the React app is running in dev move, all images load without any issue with all pathing working.
After building the app using npm run build, the js file and corresponding image files are generated and I place them on a folder on my asp.net application (e.g. Scripts folder).
When I try to view the page, the React app loads and the screen is rendered, but the images are all broken as the website can't find them.
After looking to see why the images aren't loading, they're getting a 404 not found error due to the images trying to be loaded from the current URL, rather than where the js file and images are stored.
For example, the view which loads the React app is on https://localhost/Home/ReactPage
And ReactPage.cshtml has the following in it:
<div id="thisIsTheReactDiv"></div>
<script src="/Scripts/ThisFolder/app.js" type="text/javascript"></script>
The React app js is in the Script folder in the project, so to access it, the src has been put as shown above. To access the image you'd have to do something like https://localhost/Scripts/ThisFolder/image.png
At this stage what it's doing is the image is being linked to https://localhost/Home/ReactPage/image.png which causes a 404 error.
Are there any webpack configs that can be done to make it point to a specific path before it gets built?
Is there any way to make the React app when building for PROD update the image relative paths so it looks at a specific folder rather than trying to get it from the current path?
Alright, after a few hours of searching (which lead me to post this question), I've figured out how Webpack works with relative pathing now.
Looks like there's a section called "publicPath" in the output setting where you can type in to get the path relative to where your React JS file is deployed at.
So it looks like typing in
publicPath: "/Scripts/ThisFolder/",
will make the relative path to start from there so all images will load from that URL.
As seen from this Stack Overflow link: What does "publicPath" in Webpack do?