I am trying to fetch images from Strapi into my NextJS Application, but whatever I am trying to do I am always getting the error "url" parameter is valid but upstream response is invalid...

I know that in Next.js we have Image component, but the problem I have with it is that I can't use it as a normal HTML tag like <img />. I have to give it a layout, but there's no option to c...

I am using Next JS and Material UI together in my project. for Image optimization, I would like to use the Next JS Image component. currently, my card media looks like below. I am getting the image...

I am having issues with indexing the images that are optimized by the Next/Image component these images are in the public folder of my Next.js app. I haven't seen any examples where any resource/UR...

In Material UI the components that display images have a parameter for the image. eg: <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" /> In Next.js v10 there i...

I've been having a tough time working with NextJS's Image component. I want to setup a banner image. This image must only cover a certain amount of space on the screen at any time, regardless of sc...

I am using the latest version of NextJS 10.0.9. I've got an Image that I'm trying to display, however I'm receiving the error: Error: Image with src "https://picsum.photos/480/270" must u...

I am using the NextJS Image component like this: <Image src="https://firebasestorage.googleapis.com/v0/b/africatech-7cf1b.appspot.com/o/images%2F1606851317444_impact-logo-sq-Owen-Hancock.pn...

The image is working just fine. Here is the code <Image layout="fixed" src="/images/example.jpeg" alt="Example image" width="140" height="140&qu...

I am using react dropzone to upload multi-image in my simple application. For showing which type of images are drop for that I make a separate component with TypeScript. But Next.js image src is sh...

I'm leaning Next.js and I have found that next/image is wrapping the img with two spans and adding inline style to the img tag which overriding my class style How can I remove the inline style and ...

I have a bunch of images in a hidden gallery, only shown when a user clicks on a certain button. On the development server, everything is fine, no errors or issues, but when I deploy my website and...

I am currently working on a page using NextJs and TailwindCss. The user has the ability of loading an image locally and setting the number of pieces horiz/vert (rows/cols) that they wish the image ...

I am trying to use the Next.js Image component with images that all have unique sizes. Their example states the image will stretch to the parent div width and height. I've tried wrapping them but d...

What did I do? Setup a NextJs project to ship different image sizes for different screens sizes with the help of next/image component with the following settings: <Image src={image} alt={title...

I'm using Next.js 10.0.7 and next-images 1.7 and big images take some seconds to appear. I'm using the components correctly, you can see bellow, but I think that there is a solution to my problem. ...

I am providing the src prop to the UserCard but then also I am getting the error below. Error Unhandled Runtime Error Error: Image is missing required "src" property. Make sure you pass &...

I am running a Next.js app and a Storybook component library. I would like to use next/image in Storybook so that I can take advantage of the image optimization. I followed this article to mock nex...

I have a blog that uses images with different scales and aspect ratios. Some are short and wide, some are tall and narrow. You can see an example here. I want my images to: Be at most as wide as t...

In my app I allow users to upload their images. Upon uploading it goes into public folder, and in database there is only a direct link for future requests. When displaying these images on the page ...

I'm trying to import an image in Next.js but I get this error. I don't know what's the problem, could someone here help me about this? The image is located in public folder, this is the Error...

I'm getting some images from Firebase using getStaticProps, and then displaying them with next Image component. However, they take a while to display, how can I display a placeholder while they hav...

I am using the following code to show an image: import Image from 'next/image' // ... <Image src={ausrufezeichen} alt="Ausrufezeichen"/> The following HTML Code is being rendered: ...

I have setup my next js code with some static images into the system which is used as <Image height={50} width={140} alt="Alt" objectFit="contain" src="/images/logo...

I want to show a skeleton while my image is loading. I tried to pass an onLoad prop in the new Image component provided by NextJS but the function fires off before the image is loaded. Here is my c...