I am using NEXT/Image component and facing this issue: When I open the source code on chrome the image src is this: https://www.example.com/_next/image?url=%2Fimages%2Fhome%2FDog-image-1.jpg&w=...

Recently, I have been working on a project in NextJS which uses the YoutubeAPI to fetch video information, including thumbnail URLs. The thumbnail URL for a full resolution image looks like this: h...

I'm using next/image, which works great, except the actual image loading in is super jarring and there's no animation or fade in. Is there a way to accomplish this? I've tried a ton of things and n...

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 clic...

I am using NextJS Image component. I want the image to fill 100% width and take as much height as it needs to maintain the aspect ratio. I have tried many different variations of this code but it w...

I am using Next.js and next/image to display images, but the CSS is not working inside it. The image is in SVG format and I have placed it in the public folder. I am using Tailwind CSS along with t...

I'm trying to use a next/image instead of a regular img tag in the code below. With the regular <img> tag, the following achieves exactly what I'm looking for: <div> <picture&gt...

Next.js has recently made a modification (in v11.0.x) which has the following type definitions: In next-env.d.ts (non-modifiable, regenerated at every build): /// <reference types="next&quo...

I use the Next.js Image component for image optimization. It works great on dev but it doesn't load images from external URLs in production. What can I do?

I have a Next.js site with the @svgr/webpack library installed. I have configured next.config.js to work with @svgr/webpack and now want to import an svg image and use it with the new next/image co...

I have a Next.js app, and I need an image that fills the full height of its container while automatically deciding its width based on its aspect ratio. I have tried the following: <Image src=&q...

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 nex...

I am trying to use Tailwind CSS in an Next.js project but I cant't use my Tailwind classes with Next.js Image component. Here's my code: <Image src={img.img} alt="Picture of the author&qu...

I want to load different images for mobile viewport. Based on the Next.js doc passing srcSet does not work, so how can I do it? Right now I can do it with CSS display property but I need something ...

I have various image url and changes over time (the image are taken for web by url address and not locally or from a private storage). In order to render <Image /> tag , domains should be pas...

I created middleware and add matcher /((?!api|_next/static|_next/image|favicon.ico|auth/login).*) in config middleware. When I try to run npm run dev.The result comes out like this: ImageError: Una...

I have a Next.js app I am deploying to Heroku. When I dev locally I see the images, but when I push to Heroku and check the site, the images have a 404. I have a public folder where I have the imag...

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 m...

Since version 10, Next.js comes with the built-in Image component which provides the feature of image optimization and resizing image responsively. I like it a lot and I've been using it across my ...

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...

I'm creating an array of objects where I have an image src property whose name is coverSrc, and I'm exporting & importing it into my main component. In my main component, I m using the Material...

This is my code for the Nextjs Image component: ... Cell: ({ value }: CellType) => ( <Image priority src={value} loader={() => value} className={''} height={100} width={100} alt={'...

My Home page sends data from my strapi cms to my PostSlider component via props import React from "react"; import styles from './index.module.scss' import { AxiosService } from '../utils/...

Next.js Image does not work on the server, but it works on the localhost. One could think about permissions, because I take images from a third-party domain, BUT I load images in a regular img, bot...

I'm trying to add the Next Image component to my project. And I have a problem, the image disappears when I add layout='responsive'. code: <Box> <Link href='/' > <Image src='/image...