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
1
vote
1 answer
How to use PNG images in Next.js outside the default PUBLIC directory?
I saw that an alternative to be able to use images using another directory other than the Public folder, is to use the Next-Images library, but I do all the setup correctly as described in the documentation, I've seen several videos on the internet,…
Karyl Chesman
- 23
- 1
- 3
1
vote
2 answers
next-images breaking all the absolute paths in my next.js project
I want to have inline png images on my next.js project. As this is not a native supported feature, I'm using the next-images library for that.
This is my next.config.js
const withImages = require('next-images')
module.exports = withImages()
The…
Captain
- 105
- 1
- 15
1
vote
0 answers
Next.config.js Configuration with next-images
I would like to ask how can I use this piece of code.
module.exports = {
reactStrictMode: true,
}
inside this code block:
// next.config.js
const withImages = require('next-images')
module.exports = withImages({
assetPrefix:…
user16380047
1
vote
2 answers
How to give the container a dynamic width with Next JS Image component?
So, I have a container div and an Image component in it. I want the image height be equal to the 100% of container height, and the width of container to be automatically decided based on the width of image according to its aspect ratio. When I use a…
noiseymur
- 761
- 2
- 15
0
votes
1 answer
Tailwind CSS centering a NexJS
I'm trying to get my MapBoxGL popup content to have some styling. I'm trying to get the text styling above the image to be on the left and then the image below to be centered on the popup. See below for image. I got here because I'm converting all…
Cflux
- 1,423
- 3
- 19
- 39
0
votes
0 answers
Next JS app - high Largest Contentful Paint showing huge hero image (mobile) in screenshot for initial page load
I'm completely stuck on getting my Hero Image to load efficiently and am using 'PageSpeed Insights' to measure... and really hope someone can help . I'm sure I'm not the only one that's had this issue before but I can't seem to find anything…
sbloxy88
- 13
- 3
0
votes
0 answers
Nextjs 12 next/image not providing optimized image in Pagespeed
I am using next/image from NextJs 12 but my problem is the page speed always shows that images are not sized properly.
P.S. I am trying to use this image as background image
Can anyone please guide me where I am doing wrong?
Css file
…
manish singh
- 87
- 1
- 13
0
votes
0 answers
Next.js 13 _next/image not showing in vercel stage server prod build
I have the following nextjs middleware.ts config file,
export const config = {
matcher: [
/*
* Match all request paths except for the ones starting with:
* - api (API routes)
* - _next/static (static files)
* - _next/image…
Mehadi Hassan
- 1,160
- 1
- 13
- 33
0
votes
1 answer
I cannot load Next.js image in Direct Path with external site image
I use Next.js v13.4.4.
Error is here, and of course, it doesn't from a static image.
Error: An object should only be passed to the image component src parameter
if it comes from a static image import.
It must include height and width.
Received…
Jack
- 125
- 1
- 1
- 10
0
votes
0 answers
ipfs-infrua, Failed to load resource: the server responded with a status of 400 () ipfs-infura
The image is not displayed, infura ipfs, I got this error,
Failed to load resource: the server responded with a status of 400 ()
GET…
0
votes
1 answer
how to use an svg image in next app and change it's color dynamically?
I have next 13 app with the app directory and I am trying to show an icon in a component, I was able to achieve this but not able to change the color of the svg image. Is there a way to achieve coloring for the svg image with next/Image or is there…
karthik suryadevara
- 128
- 1
- 8
0
votes
0 answers
Displaying a SVG in a component in Next (next/image)
I'm building a component which displays SVG icons from the public folder. The component accepts name, height, width and color and should return the according icon in the right size and color. Here's what I tried:
type Props = {
name: string;
…
Jo_K
- 51
- 5
0
votes
0 answers
Using Next.js specific features in a ui library published as npm package
I have a published Ui-component/Widget library. For the images in the Widgets I would like to use next/image. But when starting the app that consumes my library im getting the error:
error - Error [ERR_MODULE_NOT_FOUND]: Cannot find module…
Simon Lehmann
- 517
- 4
- 6
0
votes
0 answers
How to preload nextjs images in the previous page
I am trying to preload images located in the public/assets/images directory in Next.js 13.
But it is not likely to use the import someImg from '../../'; because I want to display one of the images using the query data, like this:
vriznet
- 3
- 3
0
votes
0 answers
Virtual directory as a relative path for image
I'm building a next.js application, and the production server is IIS,
the backend team have created a virtual directory inside the client/public folder, and they put images inside that virtual directory.
they return the relative path of the images…
Abdelghani Adel
- 17
- 3