I have a component with dynamic content like so :
<Image width="680" height="400" src={post.imgsrc} alt={post.title} />
I keep having the same error even if I have added the width/height :
Image with src "/imgs/paintings/2022/2.jpg" must use "width" and "height" properties or "layout='fill'" property.
I don't know why, and I wonder why I have to specify width and height since my pictures have different sizes...
One thing to mention is that you can import the images if they are local, if you want that you do not need to use width, height, or fill.
They get provided automatically
Example from the docs:
import profilePic from '../public/me.png'
import Image from 'next/image'
import profilePic from '../public/me.png'
function Home() {
return (
<>
<h1>My Homepage</h1>
<Image
src={profilePic}
alt="Picture of the author"
// width={500} automatically provided
// height={500} automatically provided
// blurDataURL="data:..." automatically provided
// placeholder="blur" // Optional blur-up while loading
/>
<p>Welcome to my homepage!</p>
</>
)
}
This also explains why remote images do need these properties.
Related
While the image is loading, I want to show a color (black) and have that fade to the image once the image is loaded. Is there any good way to do this?
import Image from 'next/image'
const myLoader = ({ src, width, quality }) => {
return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}
const MyImage = (props) => {
return (
<Image
loader={myLoader}
src="me.png"
alt="Picture of the author"
width={500}
height={500}
/>
)
}
First add classes for opacity. And add a function for onLoadingComplete.
<Image
loader={myLoader}
src="me.png"
alt="Picture of the author"
width={500}
height={500}
className={`${
heroHasLoaded ? "opacity-100" : "opacity-0"
} transition-opacity duration-500`}
onLoadingComplete={doFadeIn}
/>
Add the callback function.
const doFadeIn = () => {
setHeroHasLoaded(true);
};
You also need to set the initial background color. I set this on a <div> that contains the image.
Note that if this image is going to be the Largest Contentful Paint, then also add priority to the <Image /> component. https://nextjs.org/docs/basic-features/image-optimization#priority
I'm rewriting old code and I want to move image definition from .css files ( background: url('./../images/something.svg') ) to .jsx and also I'm removing webpack and want to use only react-script. When I move the image to .jsx file that I first import the image import something from '../../../images/something.png'; and then I use it <img src={something} alt="Something" /> after this I'm getting error Module build failed (from ./node_modules/resolve-url-loader/index.js): Error: resolve-url-loader: error processing CSS file://C:\dev\my-project\src\images\something.png:1:1: Unknown word or Unclosed string in the end
When you import images to jsx file your syntax will look like this
import img from '../../../images/something.png'
const App = () => {
return(
<>
<img src={img}/>
</>
);
}
when you import you add image to "variable" at this case it's img
As you import footer in this line import footer from '../../../images/something.png';, you must use footer as a variable in the attribute's value of img tag because it specifies the path to the image.
For example,
Code must be
<img src={footer} alt="Something" />
Instead of
<img src={something} alt="Something" />
I'm having an issue with forwardRef and Input from ChakraUI.
I tried to do a generic input component which has always flushed variant. My problem is Chakra does reset variant to default.
ModalInput Component
import { forwardRef, InputProps, Input } from '#chakra-ui/react';
const ModalInput = forwardRef<InputProps, 'input'>((props, ref) => (
<Input ref={ref} color="gray.600" variant="flushed" {...props}>
{props.children}
</Input>
));
export default ModalInput;
ModalInput Component
<ModalInput placeholder="ex: Entreprise Dupont" />
This way, all my ModalInput should have variant flushed, but you can see on the screenshot below it is outline.
Thanks for help !
I finally discovered this bug was due to InputGroup, which was enclosing my ModalInput.
Reported this bug here.
Find the sandbox here
I just want to know how can we let an image take its own height and width using <Image> component in Next.js, instead of defining height and width by ourselves?
Beginning from Next.js v11, you can simply do:
import Image from 'next/image';
import foo from 'path/to/foo.png';
// ...
<Image src={foo} alt="" /> // <-- no need to pass height/width
In the above example, foo will be an object containing src, height, width (and optionally blurDataURL). So, if you want to access them, you can do stuff like foo.height, etc.
Also, there are a few hacks that may interest you:
Use layout="fill" and pass a handler to onLoadingComplete, where you will get naturalWidth and naturalHeight. Then you can set the state to adjust the container accordingly. But this approach is not recommended as it will likely increase CLS.
In data fetching methods [getStaticProps (static generation) / getServerSideProps (SSR)], read your image files and pass their dimensions as a prop to your components. SSR may cause an overhead on your server resources, but that can be minimized significantly by caching.
Simply use your good old img tag. Again not recommended, but will work if your files are already optimized. ESLint may throw some warning depending on your configuration, you would need to disable those rules.
PS: Just check once if your use-case can be handled by layout="fill" (without updating state).
Just a clarification - on older threads on SO, GitHub, etc., you may see an unsized prop being passed to next/image. It was deprecated in Next.js v10, and removed in v11. So, its probably not gonna work for you.
References:
https://nextjs.org/docs/api-reference/next/image
https://nextjs.org/docs/basic-features/data-fetching
https://nextjs.org/docs/going-to-production
Get the width and height of an image in node.js
Next.js build fails using <img> tag
How to use Image component in Next.js with unknown width and height
https://web.dev/cls
https://web.dev/time-to-first-byte
A sample implementation of the second hack:
import fs from "fs";
import path from "path";
import Image from "next/image";
import probe from "probe-image-size";
const IndexPage = ({ mountains }) => (
<Image
src="/mountains.jpg"
height={mountains.height}
width={mountains.width}
alt="Mountains"
/>
);
const getStaticProps = async () => {
const mountains = await probe(
fs.createReadStream(path.join(process.cwd(), "public/mountains.jpg"))
);
return { props: { mountains } };
};
export default IndexPage;
export { getStaticProps };
I have an image in a bootstrap card using next/image. I would like the image to be smaller and not fill the entire top portion of the card. Say about 60% of the original size. I tried to wrap the image in a div container and added some css but did not have any affect on changing the size.
import Image from 'next/image'
import logo from '../public/delta-logo.png'
import { Card, Button } from 'react-bootstrap'
import styles from './landing.module.css'
import 'bootstrap/dist/css/bootstrap.min.css'
export default function LandingPage() {
return (
<Card style={{ width: '18rem' }}>
<Image src={logo} alt='Picture of our Logo' />
<Card.Body className='text-center'>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</Card.Text>
<Button variant='primary'>Go somewhere</Button>
</Card.Body>
</Card>
)
}
for more optimizing you can use this option in Next.config.js:
[image-optimization-nextjs][1]
[1]: https://nextjs.org/docs/basic-features/image-optimization#loader
you don't need to import images on your page. next/image by default recognize /public dir. src="/delta-logo.png"
and You can either use width and height properties in Image tag.
You can either use width and height properties in Image like
<Image src={logo} alt='Picture of our Logo' width={500} height={500}/>
OR
Define a class for your image in your CSS file, and add that className to your Image tag like
<Image src={logo} alt='Picture of our Logo' className='yourClass'/>