JavaScript and I am loading random images from https://picsum.photos but it is not working. Note that for now, I do not want to use the new image optimization in next.js.
Local images are working but external images are not working.
Below is my code and my next.config.js
<Slider
{...settingsThumbs}
asNavFor={nav1}
ref={slider => setSlider2(slider)}
>
{slidesData.map(slide => (
<div className='slick-slide' key={slide.id}>
<img
className='slick-slide-image'
src={`https://picsum.photos/800/400?img=${slide.id}`}
alt='sfd'
/>
</div>
))}
</Slider>
below is my next.js config
module.exports = {
images: {
domains: ['https://picsum.photos/']
}
};
Per the docs, the domain does not appear to need a protocol (https or http) in front of it. Try
module.exports = {
images: {
domains: ['picsum.photos']
}
};
I also suspect you have an error like the following in your console, going off this source code:
domains value must follow format { domain: 'picsum.photos', ... }.
See more info here: https://err.sh/next.js/invalid-i18n-config`
Note: Modifications to the next.config.js file may sometimes require to to restart the dev server before they take effect.
Related
So i'm using the Contentful API to get some content from my account and display it in my Next.Js app (i'm using next 9.4.4). Very basic here. Now to protect my credentials, i'd like to use environment variables (i've never used it before and i'm new to all of this so i'm a little bit losted).
I'm using the following to create the Contentful Client in my index.js file :
const client = require('contentful').createClient({
space: 'MYSPACEID',
accessToken: 'MYACCESSTOKEN',
});
MYSPACEID and MYACCESSTOKEN are hardcoded, so i'd like to put them in an .env file to protect it and don't make it public when deploying on Vercel.
I've created a .env file and filled it like this :
CONTENTFUL_SPACE_ID=MYSPACEID
CONTENTFUL_ACCESS_TOKEN=MYACCESSTOKEN
Of course, MYACCESSTOKEN and MYSPACEID contains the right keys.
Then in my index.js file, i do the following :
const client = require('contentful').createClient({
space: `${process.env.CONTENTFUL_SPACE_ID}`,
accessToken: `${process.env.CONTENTFUL_ACCESS_TOKEN}`,
});
But it doesn't work when i use yarn dev, i get the following console error :
{
sys: { type: 'Error', id: 'NotFound' },
message: 'The resource could not be found.',
requestId: 'c7340a45-a1ef-4171-93de-c606672b65c3'
}
Here is my Homepage and how i retrieve the content from Contentful and pass them as props to my components :
const client = require('contentful').createClient({
space: 'MYSPACEID',
accessToken: 'MYACCESSTOKEN',
});
function Home(props) {
return (
<div>
<Head>
<title>My Page</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main id="page-home">
<Modal />
<NavTwo />
<Hero item={props.myEntries[0]} />
<Footer />
</main>
</div>
);
}
Home.getInitialProps = async () => {
const myEntries = await client.getEntries({
content_type: 'mycontenttype',
});
return {
myEntries: myEntries.items
};
};
export default Home;
Where do you think my error comes from?
Researching about my issue, i've also tried to understand how api works in next.js as i've read it could be better to create api requests in pages/api/ but i don't understand how to get the content and then pass the response into my pages components like i did here..
Any help would be much appreciated!
EDIT :
So i've fixed this by adding my env variables to my next.config.js like so :
const withSass = require('#zeit/next-sass');
module.exports = withSass({
webpack(config, options) {
const rules = [
{
test: /\.scss$/,
use: [{ loader: 'sass-loader' }],
},
];
return {
...config,
module: { ...config.module, rules: [...config.module.rules, ...rules] },
};
},
env: {
CONTENTFUL_SPACE_ID: process.env.CONTENTFUL_SPACE_ID,
CONTENTFUL_ACCESS_TOKEN: process.env.CONTENTFUL_ACCESS_TOKEN,
},
});
if you are using latest version of nextJs ( above 9 )
then follow these steps :
Create a .env.local file in the root of the project.
Add the prefix NEXT_PUBLIC_ to all of your environment variables.
eg: NEXT_PUBLIC_SOMETHING=12345
use them in any JS file like with prefix process.env
eg: process.env.NEXT_PUBLIC_SOMETHING
You can't make this kind of request from the client-side without exposing your API credentials. You have to have a backend.
You can use Next.js /pages/api to make a request to Contentful and then pass it to your front-end.
Just create a .env file, add variables and reference it in your API route as following:
process.env.CONTENTFUL_SPACE_ID
Since Next.js 9.4 you don't need next.config.js for that.
By adding the variables to next.config.js you've exposed the secrets to client-side. Anyone can see these secrets.
New Environment Variables Support
Create a Next.js App with Contentful and Deploy It with Vercel
Blog example using Next.js and Contentful
I recomended to update at nextjs 9.4 and up, use this example:
.env.local
NEXT_PUBLIC_SECRET_KEY=i7z7GeS38r10orTRr1i
and in any part of your code you could use:
.js
const SECRET_KEY = process.env.NEXT_PUBLIC_SECRET_KEY
note that it must be the same name of the key "NEXT_PUBLIC_ SECRET_KEY" and not only "SECRET_KEY"
and when you run it make sure that in the log says
$ next dev
Loaded env from E:\awesome-project\client\.env.local
ready - started server on http://localhost:3000
...
To read more about environment variables see this link
Don't put sensitive things in next.config.js however in my case I have some env variables that aren't sensitive at all and I need them Server Side as well as Client side and then you can do:
// .env file:
VARIABLE_X=XYZ
// next.config.js
module.exports = {
env: {
VARIABLE_X: process.env.VARIABLE_X,
},
}
You have to make a simple change in next.config.js
const nextConfig = {
reactStrictMode: true,
env:{
MYACCESSTOKEN : process.env.MYACCESSTOKEN,
MYSPACEID: process.env.MYSPACEID,
}
}
module.exports = nextConfig
change it like this
Refer docs
You need to add a next.config.js file in your project. Define env variables in that file and those will be available inside your app.
npm i --save dotenv-webpack#2.0.0 // version 3.0.0 has a bug
create .env.development.local file in the root. and add your environment variables here:
AUTH0_COOKIE_SECRET=eirhg32urrroeroro9344u9832789327432894###
NODE_ENV=development
AUTH0_NAMESPACE=https:ilmrerino.auth0.com
create next.config.js in the root of your app.
const Dotenv = require("dotenv-webpack");
module.exports = {
webpack: (config) => {
config.resolve.alias["#"] = path.resolve(__dirname);
config.plugins.push(new Dotenv({ silent: true }));
return config;
},
};
However those env variables are gonna be accessed by the server. if you want to use any of the env variables you have to add one more configuration.
module.exports = {
webpack: (config) => {
config.resolve.alias["#"] = path.resolve(__dirname);
config.plugins.push(new Dotenv({ silent: true }));
return config;
},
env: {
AUTH0_NAMESPACE: process.env.AUTH0_NAMESPACE,
},
};
For me, the solution was simply restarting the local server :)
Gave me a headache and then fixed it on accident.
It did not occur to me that env variables are loaded when the server is starting.
hello guys i have problem with vite react dynamic images url not loading correctly and thats my component
<Flex>
{data?.map((tag) => (
<Box key={tag._id}>
<Image w="150px" h="150px" src={`http:localhost:5000/${tag.imageUrl}`}></Image>
</Box>
))}
</Flex>
when i check the network tab i see that the url of the client is added to the image url
http://localhost:3000/localhost:5000/uploads/1623642756947--Capture.PNG
in create react app maybe we can use reqiure() to fix that but i dont know how to fix that in vite and adding reqiure() throw an error
when i check the network tab i see that the url of the client is added to the image url
http://localhost:3000/localhost:5000/uploads/1623642756947--Capture.PNG
👉 This is because importing a static asset in vite return the resolved public URL when it is served.
This excerpt from the offical doc say (adapted according your question):
For example, http//:localhost:5000/${tag.imageUrl} will be /http:localhost:5000/uploads/1623642756947--Capture.PNG during development,
and become /assets/http:localhost:5000/uploads/1623642756947--Capture.PNG in the production build.
The solution is to use the server.proxy option of vite config to forward your dynamic assets requests to the desired server, in vite.config.js add:
server: {
proxy: {
// forward `/uploads/` endpoint to -> `http://localhost:5000/uploads/`
'^/uploads': {
target: 'http://localhost:5000/'
}
}
}
So in your component, Image should be declared like that :
<Image w="150px" h="150px" src={`${tag.imageUrl}`}></Image>
Now when you hit
http://localhost:3000/uploads/1623642756947--Capture.PNG
The asset (image) will be loaded from to http://localhost:5000/uploads/1623642756947--Capture.PNG
You can get more information about Static Assets Handling here and vite proxy options here.
Solution tested and working ✔
You can actually use the dynamic URL pattern via template literal. This is what it may look like for your case:
function getImgUrl(name) {
return new URL(`${name}`, import.meta.url).href
}
<Flex>
{data?.map((tag) => (
<Box key={tag._id}>
<Image w="150px" h="150px" src={ getImgUrl(tag.imageUrl) }></Image>
</Box>
))}
</Flex>
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
Is it possible to check if a file exists within the /public/ directory?
I have a set of images that correspond to some objects. When available, I would like to display them using <img> tag. However not all of the objects have a corresponding image, in which case I would like to perform a REST request to our server.
I could create a list of files as part of build process, but I would like to avoid that if possible.
I am using create-react-app if it matters (if I understand correctly fs doesn't work in client-side React apps).
EDIT: I guess I should have been more exact in my question - I know client-side JS can't access this information (except through HTTP requests), I was just hoping something saves information (during build) about the files available in a way that is accessible to client-side Javascript... Maybe Webpack or some extension can do this?
You can do this with your axios by setting relative path to the corresponding images folder. I have done this for getting a json file. You can try the same method for an image file, you may refer these examples
Note: if you have already set an axios instance with baseurl as a server in different domain, you will have to use the full path of the static file server where you deploy the web application.
axios.get('http://localhost:3000/assets/samplepic.png').then((response) => {
console.log(response)
}).catch((error) => {
console.log(error)
})
If the image is found the response will be 200 and if not, it will be 404.
Edit: Also, if the image file is present in assets folder inside src, you can do a require, get the path and do the above call with that path.
var SampleImagePath = require('./assets/samplepic.png');
axios.get(SampleImagePath).then(...)
First of all you should remember about client-server architecture of any web app. If you are using create-react-app you are serving your app via webpack-dev-server. So you should think about how you will host your files for production. Most common ways are:
apache2 / nginx
nodejs
but there is a lot of other ways depending on your stack.
With webpack-dev-server and in case you will use apache2 / nginx and if they would be configured to allow direct file access - it is possible to make direct requests to files. For example your files in public path so
class MyImage extends React.Component {
constructor (props) {
super(props);
this.state = {
isExist: null
}
}
componentDidMount() {
fetch(MY_HOST + '/public/' + this.props.MY_IMAGE_NAME)
.then(
() => {
// request status is 200
this.setState({ isExist: true })
},
() => {
// request is failed
this.setState({ isExist: false })
}
);
}
render() {
if (this.state.isExist === true) {
return <img src={ MY_HOST + "/public/" + this.props.MY_IMAGE_NAME }/>
}
return <img src="/public/no-image.jpg"/>
}
}
How can I load images in a component in Next.js? Do I have to build the project first? If yes, is there a way to load the images without building first? I cannot get this to work, no matter what I try.
from the docs:
Next.js can serve static files, like images, under a folder called
public in the root directory. Files inside public can then be
referenced by your code starting from the base URL (/).
So, first add an image to public/my-image.png and then you can reference it:
<img src="/my-image.png" />
I think next.js will have a watch on this directory so you won't need to restart your server every time you put something in there.
The static directory has been deprecated. Place files in public/static directory
Another way I find out Next Images
installation:
npm install --save next-images
or
yarn add next-images
Usage:
Create a next.config.js in your project
// next.config.js
const withImages = require('next-images')
module.exports = withImages()
Optionally you can add your custom Next.js configuration as parameter
// next.config.js
const withImages = require('next-images')
module.exports = withImages({
webpack(config, options) {
return config
}
})
And in your components or pages simply import your images:
export default () => <div>
<img src={require('./my-image.jpg')} />
</div>
or
import myImg from './my-image.jpg'
export default () => <div>
<img src={myImg} />
</div>
From Next.js v11 onwards, one can now directly import images without any additional config or dependencies. Official example (comment mine):
import Image from 'next/image'
import profilePic from '../public/me.png'
function Home() {
return (
<>
<h1>My Homepage</h1>
<Image src={profilePic} alt="Picture of the author" />
{/* <img src={profilePic.src} alt="Picture of the author" /> */}
<p>Welcome to my homepage!</p>
</>
)
}
export default Home
Docs: next/image
With Next 10+
To serve an optimized image:
import Image from 'next/image'
<Image src={'banner.jpg'} alt='Home Page' width={100} height={100} />
Place the image in the public folder. All the referenced images must be present in the public folder at the build time. Image hot deployment will not work for images that reside in the public folder.
You also can refer to cross-domain images with <Image> tag.
<Image src={'https://www.example.com/banner.jpg'} alt='Home Page' width={100} height={100} />
To allow cross-domain images, ensure to add the below entry to your next.config.js
module.exports = {
images: {
domains: ['www.example.com'],
},
}
what i like to do for directing to images is using environment variables. in next.js they are easily set in next.config.js file like below:
// next.config.js
module.exports = {
env: {
PUBLIC_URL: '/',
}
};
then you can direct to your publics path wherever it is by using process.env.PUBLIC_URL like below:
<img src={`${process.env.PUBLIC_URL}/my-image.jpg`} />
the advantages of using PUBLIC_URL environment variable over hard coding the path is that you can use another path for when file arrangements change (like in server). for then you could set conditionally which PUBLIC_URL value to use in production and development.
update
sometimes the problem of images used with next/Image not showing is bc of not setting the right layout value or it lacks width and height attributes when used with layout other than fill.
Using Image component of Next.js version 13 is a little bit different than than its previous versions. It's actually easier and you can use optimization features with less effort and work arounds. In this version :
you're not obligated to set domains in next.config.js.
you can either set the image its width and height or set to fill and handle its sizing with styles or classNames which means you can set max-height or max-width. so in that case that you don't know your image's width and height it's be shown properly.
as well as its previous versions you can use priority and ...
I will add here one obvious case, that is usually easily forgotten. It keeps appearing when one re-structure a site page and our IDE "silently fails" to update the paths of a related file/component or simply when one is more tired or distracted.
If you are using a page inside a folder
ex: mysiteDomain/pagefolder/page
You should be careful when using relative path.
Something like <img src="logo.png" /> should be changed it to <img src="../logo.png" /> since the compiled page will also be inside a folder pagefolder.
The path in the src attribute will be relative to the compiled page.
As an alternative, you could simply use an absolute path like for ex <img src="/logo.png" />. The path in the src attribute will be relative to the compiled root of the site.
Do NOT put public into /src!
In my case, I had a src dir into which I put my pages etc., which is an option described here. But I ALSO accidentally moved the public dir there. This will mess nextjs up -- you need to keep public in the root dir.
After running next build && next export and your images are not visible do this:
// next.config.js
/** #type {import('next').NextConfig} */
module.exports = {
reactStrictMode: true,
images: {
loader: "custom",
loaderFile: "./imageLoader.js",
},
assetPrefix: "./",
env: {
// dev does not need static path
ROOTDIR: process.env.NODE_ENV === "development" ? "" : "file:///C:/Users/.../out",
},
};
Create an imageLoader.js too in the root project
export default function imageLoader({ src, width, quality }) {
return `process.env.NODE_ENV === "development" ? "" : "file:///C:/Users/.../out${src}?w=${width}?q=${quality || 75}`;
}
Where file:///C:/Users/.../out refers to full path to the root of your build
Now you can append process.env.ROOT before "/*"