Estoy atascado y no puedo colocar la imagen de fondo en mi próxima aplicación JS.
Aquí está mi código.
globals.css
.container { padding: 0 2rem; background-image: url(../public/images/landing-page-illustration.svg); } index.js
import Head from 'next/head' import Image from 'next/image' import Navbar from '../components/navbar'; import styles from '../styles/Home.module.css' export default function Home() { return ( <div className={styles.container}> <Navbar/> </div> ); }Solo necesitas hacer esto. Esto funciona para mi. Actualice la clase de viento de cola con su css.
<div className="relative"> <!--position: 'relative' --> <Image src="image path" layout="fill" objectFit="cover" /> <div className="w-full relative"><!-- position: 'relative' --> <h2 className="text-center font-semibold text-4xl pb-8 pt-14 text-pink-600">hello</h2> </div> </div>La altura del fondo aumentará según el contenido. Puede fijar la altura por
altura: '80vw'
También me atasqué en este problema, luego usé las next-images y declaré esto en el archivo jest.config.js de esta manera:
module.exports = { async redirects() { return [ { ... }, ]; }, reactStrictMode: true, future: { webpack5: true }, images: { domains: ['https://...'], }, }; const withImages = require('next-images'); module.exports = withImages(); y solo usé la <img /> para representar la imagen
<img src={Wave} style={{ zIndex: -1, width: '100%', position: 'absolute', }} className='md:bottom-px origin-center rotate-180 md:rotate-0 ' alt='' />