Questions tagged [next-images]
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).
107
questions
0
votes
2
answers
37
views
NextJS 14 Next Image fill property not working with tailwind css
I am using Next JS 14 and Tailwind CSS
If I use fill this is code:
"use client";
import React from "react";
import { motion } from "framer-motion";
import Image from &...
- 729
0
votes
4
answers
40
views
next/image returning me bad request on local images
I have images in my public directory and when I try to reach them out, I get:
GET
http://localhost:3000/_next/image?url=%2Fmedia%2Fheader-logo.png&w=256&q=75
400 (Bad Request)
The way I do ...
0
votes
0
answers
31
views
I would like to bring different image sizes to match the screen size
Below is the code I'm currently using.
<section className='relative h-screen w-full'>
<div className='absolute z-10 h-full w-full bg-apply-background-gradient' />
<Image
...
0
votes
0
answers
99
views
Next.js Image Optimization Error: "The requested resource isn't a valid image" for valid image paths
I am developing a Next.js application (version 14.2.3) and encountering an issue with the next/image component when trying to load images. The error message I receive after build project:
ImageError: ...
0
votes
0
answers
19
views
Display Images from cloudinary in nextjs
I have added the images to cloudinary but I don't know how to display them in my nextjs website. I'm not really sure how to use the src field.
I was able to use the id of each image but I'm not sure ...
0
votes
0
answers
68
views
Next Js tailwind styles are not working on vercel
I recently learned Next.js and built a simple movies website, employing Tailwind CSS for styling. However, upon attempting to deploy the site to Vercel, none of the CSS styles, especially those I ...
1
vote
0
answers
46
views
In Nextjs 14, how can an image be imported dynamically from outside the app folder but as a subfolder of src?
Our app tree is structured as follow:
my-app|
|src|
|app
|...
|portfolio|
|project_1
|project_2
...
- 164
0
votes
1
answer
618
views
How do I make a Next.js <Image> tag work with my AWS S3 Bucket Policy?
I have a Next.js app that I've deployed with Vercel and am using an AWS S3 Bucket to store photos that I want to be able to read only from my website.
My CORS policy is set to allow all traffic so it ...
- 325
1
vote
0
answers
154
views
next/image layout shift problem when using fill={true}
I need to achieve a look like this:
My images are stored on 3rd party services (I don't know their width/height), I use fill.
<div className="relative max-h-96">
<Image src={url} ...
- 1,224
0
votes
0
answers
33
views
Next Image is not loading in Login Page
I am using next image to optimize images, and the image in my login page is not loading after deployment. However, its loading in local. The first suspect is the middleware, but the config matcher ...
- 103
0
votes
1
answer
377
views
Next/image change width and height on mobile responsive
Using next/Image to display image on nexjt app. The problem is to dynamically resize image with less width and height ex. for full screen it should be 15x15 px and for mobile view it should be 8x8 px. ...
- 170
2
votes
1
answer
144
views
Why do I get "_next/image?url=example.com/assets/photo.png" when I try to load external image from another domain?
I'd like to load pictures from other domain that is "api.domain.com".
I have configured next.config.js like this in order to avoid external URL error.
const nextConfig = {
images: {
...
- 352
0
votes
1
answer
716
views
Nextjs 14 Images are not displayed in production server?
After I yarn run build and upload all files in the cpanel hosting my images looks like broken.
I added my server address in the package.json
Here is my next.config.js file
const nextConfig = {
...
0
votes
1
answer
111
views
My component is not rendering due to type mismatch (StaticImageData =/= String)
Nextjs and React beginner here.
I made an <ImageSlider /> component for my Nextjs website, but it will not render on my home page due to a type mismatch. Nextjs is expecting StaticImageData, but ...
0
votes
0
answers
113
views
why is the next/image not loading images on production?
smaple code
`/** @type {import('next').NextConfig} */
const path = require("path");
const nextConfig = {
reactStrictMode: true,
unoptimized: false,
transpilePackages: ["@nextui-...
