This tag should be used for any questions regarding the next-images npm package. Please, do not use this tag for next/image related questions (use [nextjs-image] instead).
Questions tagged [next-images]
89 questions
18
votes
4 answers
Nextjs Image: was preloaded using link preload but not used within a few seconds from the window's load event
I am using Nextjs ,a React-based framework, and i am trying show the logo.png image in Image component which is provided by Next.js.
I have this folder: public/img
and this is my code:
michael
- 847
- 4
- 10
- 17
12
votes
4 answers
How to import SVG into Next.js component?
I am trying to import an SVG image from file into a Next.js component.
In the assets folder I have google.svg (icon):
11
votes
0 answers
How do I configure NextJS to correctly handle alias paths within scss?
I've created a nextjs app within my NX monorepo and I've started porting an existing NX app (within the same monorepo) to it.
My NX monorepo is set up with many alias's, all of them configured within the root tsconfig.base.json file. For instance,…
gxc
- 4,946
- 6
- 37
- 55
11
votes
3 answers
How to export static images on Nextjs?
when I want to export my nextjs app, it says that I cannot export my images on static websites.
Error: Image Optimization using Next.js' default loader is not compatible with next export.
Possible solutions:
- Use next start to run a server, which…
Cesarioo
- 113
- 1
- 1
- 5
8
votes
5 answers
How to change height of NextJS Image tag according to screen width?
I am using next/image to render my image like this:
Anoop V
- 141
- 3
- 10
7
votes
3 answers
How to fix NextJS enoent?
You guys know what may cause this error? Help will be highly appreciated.
This error suddenly started and can't figure out why.
Any source I find related to this topic also didn't help, such as npm clear cache etc.
error - uncaughtException: Error:…
Kene
- 85
- 1
- 3
- 7
6
votes
1 answer
NEXTJS - public images not showing on dynamic routes
I have a problem with serving a static image from my public/images folder.
It correctly displays in the files I've been working on so far EXCEPT the dynamic file [itemId].js (shown in the picture below)
The most interesting clue I have is this error…
SHANbic
- 171
- 1
- 6
6
votes
3 answers
How to use SVG images inside a Next.js component?
In next.config.js - I added config which is needed for using SVG images.
const withCSS = require('@zeit/next-css');
const withSass = require('@zeit/next-sass');
const withImages = require('next-images');
module.exports = withCSS(
withSass(
{
…
Mark James
- 338
- 4
- 15
- 43
5
votes
1 answer
How to import multiple Images neatly in next/js?
The question is that I am having 10 images in my public folder and I want to use them in a component. Instead of writing
import imgurl1 from "../../public/celsius.gif";
import imgurl2 from "../../public/compass.gif";
import imgurl3 from…
MagnusEffect
- 3,363
- 1
- 16
- 41
5
votes
0 answers
next image not shown on small screens
I'm having a problem with the next image component, some images are not shown on mobile but on large screens they are. If I manually change browser width they won't disappear.
For example
Marko B.
- 535
- 3
- 8
- 18
4
votes
4 answers
How to change Next/Image according to screen size?
I have a hero with multiple images, I want to display images according to screen sizes, for example, if the user is using a big screen, the hero will load the large/wide images, and if he uses a phone, the hero will display a different image that is…
Aghilesdza
- 93
- 5
4
votes
1 answer
Next.js Image component Tailwind-css not working
So recently I've been trying to convert a react project to next and how I have to use the next/Image component which is kinda broken
Guilherme Féria
- 110
- 1
- 12
4
votes
3 answers
next-images Error: Module parse failed: Unexpected character '�'
I'm trying to load an image with next-images:
when i type in the image name it works fine:
//Working
Aland Sleman
- 319
- 5
- 18
3
votes
3 answers
NextJS images are not shown using "export" script
I have a simple NextJs app.
When I'm running the app on a localhost everything seems to work fine - All the images are shown as expected
When I use this script: next build && next export
and browse to my local build, I don't see the images, but…
Amir Ben Shimol
- 109
- 6
3
votes
0 answers
How to show a fallback image in the next/image when the browser is not supported the webp format?
Currently, I'm using the Webp image format with the next/image in my project.
It's working fine. But, I would like to show the fallback image (PNG or JPG) when the browser is not supported the webp format. How can I do that with the next/image?
I…
kogyikyaw
- 55
- 2
- 7