I am using Unsplash images in my Nextjs App. Images are loaded and showing in the app but I am getting these errors and warnings. The way I am using images I just copy the image address from Unsplash and paste the URL in the src attribute.
Here is the next.config.js file:
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
distDir: "build",
images: {
domains: ["images.unsplash.com", "cdn.pixabay.com", "images.pexel.com"],
},
};
module.exports = nextConfig;
Console error:
Network Tab error:
Note: I have also edited the next.config.js file.
Viewing a photo on Unsplash shows a URL of the format https://unsplash.com/photos/{id}.
Update your next.config.js to use the domain source.unsplash.com instead of images.unsplash.com, and then use http://source.unsplash.com/{id} in your src attribute. The image should then render as expected.
Related
I install next-video plugin for showing videos in my website.
After that, most of the time site have full reload instead Fast Refresh.
I change my next.config.js for running this plugin.
/** #type {import('next').NextConfig} */
const withVideos = require('next-videos')
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
}
module.exports = withVideos(nextConfig)
this is plugin link in npmjs
https://www.npmjs.com/package/next-videos
This is the error
warn - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works
applyHandler#http://localhost:3000/_next/static/chunks/webpack.js?ts=1666709630281:970:31
internalApply/results<#http://localhost:3000/_next/static/chunks/webpack.js?ts=1666709630281:616:21
internalApply#http://localhost:3000/_next/static/chunks/webpack.js?ts=1666709630281:615:54
hotCheck/</</</<#http://localhost:3000/_next/static/chunks/webpack.js?ts=1666709630281:585:26
waitForBlockingPromises#http://localhost:3000/_next/static/chunks/webpack.js?ts=1666709630281:539:48
how can i solve this problem?
So I am trying to display images with next/image's component. However, the images are not being displayed. I believe this is because of a 400 bad request error next/image is giving me.
When I click on that URL, it says "The requested resource isn't a valid image" which is strange because after retrieving the image url from the backend, I AM able to download the image to see that it is a valid image, so this error is happening right after the image link is passed in the props of the component. Basically, my requests are correct, but next/image's interaction with the image url is being messed up. What's weird is that I also did not have this error a few days ago, and after not changing anything, I'm seeing this error.
I've configured the next.js config file like this, and the request to the backend does retrieve a downloadable image (next/image is just not displaying it correctly).
Here is my config file for next.js:
const withPlugins = require('next-compose-plugins');
const withImages = require('next-images');
const nextConfig = {
images: {
domains: [
'url.s3.amazonaws.com',
'url.s3.amazonaws.com',
'url.s3.amazonaws.com',
],
},
};
module.exports = withPlugins([[withImages]], nextConfig);
I'm late for the topic, but hope my answer will help someone else.
Adding the domain's config into the next.config.js is not enough (only work for local):
module.exports = {
...
images: {
domains: ['firebasestorage.googleapis.com'],
}
}
For production, you need to make sure that your "next" instance grabs that config.
So in my case, what I did to make it work is:
Before
const nextjsDistDir = join("src", require("./src/next.config.js").distDir);
const nextjsServer = next({
dev: isDev,
conf: {
distDir: nextjsDistDir
}
});
After
const nextjsDistDir = join("src", require("./src/next.config.js").distDir);
const nextjsServer = next({
dev: isDev,
conf: {
distDir: nextjsDistDir,
images: {
domains: ['firebasestorage.googleapis.com'],
}
}
});
This issue is due to next.js version 11. The issue has been fixed with the next#11.0.2-canary.4 version. You can update the version. The problem will be solved.
Using loader function solves the issue. Don't know why. But updating the version is the best option.
<Image
loader={()=>user.coverImage}
src={user.coverImage}
alt="user cover image"
layout="fill"
objectFit="cover"
/>
Did you update your nextjs version ?
it seems 10.1.X and newer have some problems...
https://github.com/vercel/next.js/issues/23523
I had to add a domain name including www prefix into next.config.js. E.g. both googlapis.com and www.googleapis.com.
I imported the image first.
import product_1 from '../public/src/assets/images/ecommerce/product_img_01.jpg'
and then imported
import Image from 'next/image'
and used it as so.
<Image src={product_1} />
and everything worked fine in next version 12.3.1
Run in console at proyect route: rm -rf .next/
Then run the server again and try
I’m implementing the Next.js Image component in my Headless project. The CMS that I’m using is WordPress. And since the image is coming from an external website, I need to specify the domain on next.config.js, as the documentation specifies:
https://nextjs.org/docs/basic-features/image-optimization
const nextConfig = {
image: {
domains: ['https://example.com'],
},
}
But in my next.config.js file I’ve already have this configuration:
const withStyles = require('#webdeb/next-styles');
module.exports = withStyles({
sass: true,
modules: true,
});
So my struggle is to combine this two on the config file.
Just for some context, without the image configuration, I have this error:
Error: Invalid src prop on next/image, hostname is not configured under images in your next.config.js
I've tried putting it together like the code bellow with the use of next-compose-plugins, but the error keeps showing:
const withStyles = require('#webdeb/next-styles');
const withPlugins = require('next-compose-plugins');
const nextConfig = {
image: {
domains: ['https://example.com'],
},
}
module.exports = withPlugins([
[withStyles({
sass: true,
modules: true,
})]
], nextConfig);
Without the nextConfig at the end of the module.exports, the code works without a problem.
A detail on the URL that I need to pass is that it's a subdomain and an homolog environment, but it doesn't need credentials to be accessed. I don't think it's the issue, tho.
Since I'm new with the Next.js, I just can't figure out how this configuration needs to work.
Your config object should be passed to the last plugin call. So in your case it would look like the following:
const withStyles = require('#webdeb/next-styles');
module.exports = withStyles({
sass: true,
modules: true,
images: {
domains: ['https://example.com'],
}
});
Also note that the correct entry for the next/image configuration is images and not image. Which is why it's probably not working when you tried with next-compose-plugins, as everything else seems to be correct in that code snippet.
For anyone whose above methods doesn't work, please remove the https:// or http:// in next.config.js;
module.exports = {
reactStrictMode: true,
images: {
domains: ['https://your-domain.com'], //make it 'your-domain.com'
},
};
I am trying to display a locale SVG file but it keeps showing the alt attribute of the element.
The img tag does have data in the src
this is my import import appleMusic from '../public/Applemusic.svg'
next.config.js
module.exports =
withImages(
withTM(
withFonts(
{
enableSvg: true,
webpack(config, options) {
return config;
},
})
)
any idea why this is happening?
As mentioned in the comments, you can use the SVG's path directly in the img's source.
<img src="/Applemusic.svg" />
Files inside the public/ folder can be referenced by your code starting from the base URL (/).
I am using the Image component from Next.js (it's a new feature of Next.js). I've tried to give the source URL:
{`${API}/user/photo/${blog.postedBy.username}`}
But it shows me this error. I also make changes in my next.config.js as
module.exports = {
images: {
domains: ['localhost'],
},
}
but nothing works for me. Please help if you know anything about this.
const src = `${API}/user/photo/${blog.postedBy.username}`;
<Image loader={() => src} src={src} width={500} height={500}/>
Here, loader is a function that generates the URLs for your image. It appends a root domain to your provided src, and generates multiple URLs to request the image at different sizes. These multiple URLs are used in the automatic srcset generation, so that visitors to your site will be served an image that is the right size for their viewport.
Edit next.config.js :
module.exports = {
reactStrictMode: true,
images: {
domains: ['example.com'],
},
}
Yes, I finally got the answer. Make loader function to load it from the destination of the image.
const myLoader=({src})=>{
return `${API}/user/photo/${blog.postedBy.username}`;
}
Use this loader function the loader attribute of an Image tag.
<Image loader={myLoader} src={`${API}/user/photo/${blog.postedBy.username}`} width={500}
height={500}/>
This works for me perfectly
I had the same issue, You need to restart your dev server, you need to do that each time you make changes on your next.config.js file.
The API string should include the port. e.g. localhost:3001
There are a whole bunch of out-of-date answers here that suggest setting the domains key in next.config.js. As of Next 12.3.0 this is no longer correct; see: https://nextjs.org/docs/messages/next-image-unconfigured-host
Instead, one should use a remotePatterns property, which is a little more complicated than the old domains:
module.exports = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'example.com',
port: '',
pathname: '/account123/**',
},
],
},
}
Inside next.config.js file.
Add Image src domain name:
const nextConfig = {
reactStrictMode: true,
images : {
domains : ['sangw.in', 'localhost', 'picsum.photos'] // <== Domain name
}
}
module.exports = nextConfig
Adding 'localhost' in the domains array will fix the issue,
Unfortunately nextJS didn't refresh the server automatically after configuration file(next.config.js) change.
You have to restart the server manually to reflect the changes.
You can also try by set reactStrictMode value reactStrictMode: true,
here is the full export object
module.exports = {
reactStrictMode: true,
images: {
domains: [
"localhost",
process.env.WORDPRESS_API_URL.match(/(http(?:s)?:\/\/)(.*)/)[2], // Valid WP Image domain.
"2.gravatar.com",
"0.gravatar.com",
"secure.gravatar.com",
],
},
};
First of all add and restart the dev server.
domains: ['localhost']
And be sure to return the image link with http(s) protocole
image link with localhost:port/... is wrong , return as http://localhost/... ( or with https )
I've faced the same issue, and my domains were correct. Deleting .next and node_modules folders, and running yarn/npm install fixed the issue.
For me, in next.config.js,
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
images: {
domains: [ "abc.def.org", ]
},
}
module.exports = nextConfig
and then in my Image tag
<Image
unoptimized // for image caching, else error
src={profile.picture}
alt={profile.picture || "IMG"}
width={60}
height={60}
/>