I recommend you to not to use svg files directly, but use Playground SVG (https://react-svgr.com/playground/), convert the file to JS and then you can change the color and other stuff by props.
From Next.js 13, the next/image component allows styling the underlying image directly using style/className. This means you can apply width: 100% and height: auto on the Image component directly. import Image from ‘next/image’; <Image src={img1} width=”0″ height=”0″ sizes=”100vw” style={{ width: ‘100%’, height: ‘auto’ }} /> Or, if using Tailwind CSS. import Image from ‘next/image’; <Image … Read more
It works for me, accordingly next.js documentation: const nextConfig = { images: { remotePatterns: [ { protocol: “https”, hostname: “**”, }, ], }, }; Next.js configuration options
I’ve been having trouble with the same issue, mostly in Slider components. Basically, because the image is off-screen until the Slider moves it into view, there is a delay and it doesn’t show for a short time, which looks nasty. Solution: Add the sharp package. The problem comes from the default image processor that NextJS … Read more
const src = `${API}/user/photo/${blog.postedBy.username}`; <Image loader={() => src} src={src} width={500} height={500}/> Here, loader is a function that generates the URLs for your image. It appends a root domain to your provided src, and generates multiple URLs to request the image at different sizes. These multiple URLs are used in the automatic srcset generation, so that … Read more
Yeah, you could use it with the layout=fill option you mentioned. On this case, you’re gonna need to set an “aspect ratio” for your images <div style={{ position: “relative”, width: “100%”, paddingBottom: “20%” }} > <Image alt=”Image Alt” src=”/image.jpg” layout=”fill” objectFit=”contain” // Scale your image down to fit into the container /> </div> You can … Read more
You need to set the configuration in the next.config.js file first. For Example: on next.config.js module.exports = { images: { domains: [‘images.unsplash.com’], }, } on pages/your_page_file.tsx <Image alt=”The guitarist in the concert.” src=”https://images.unsplash.com/photo-1464375117522-1311d6a5b81f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2250&q=80″ width={2250} height={1390} layout=”responsive” />
From Next.js 11, ESLint is supported out-of-the-box and a new set of rules is now provided, including the @next/next/no-img-element rule. You can disable this specific ESLint rule, like any other rule, in your .eslintrc file. { // … “rules”: { // Other rules “@next/next/no-img-element”: “off” } }
There’s a discussion and related example over at the Next.js GitHub project. It sounds like that example achieves what you want to do. tl;dr: <div className=”h-64 w-96 relative”> // “relative” is required; adjust sizes to your liking <Image src={img.img} alt=”Picture of the author” layout=”fill” // required objectFit=”cover” // change to suit your needs className=”rounded-full” // … Read more
This is what worked for me. with next/image: <div style={{width: ‘100%’, height: ‘100%’, position: ‘relative’}}> <Image alt=”Mountains” src=”https://stackoverflow.com/mountains.jpg” layout=”fill” objectFit=”contain” /> </div> and with next/future/image: <Image fill alt=”Mountains” src=”https://stackoverflow.com/mountains.jpg” sizes=”100vw”/> next/future/image