Afficher l'image d'arrière-plan

Question

<p>Je souhaite ajouter une image de fond à mon projet, mais cela ne fonctionne pas. </p><p>J'ai essayé d'ajouter une image d'arrière-plan globalement, mais cela n'a pas fonctionné. Il s'agit du code de la page d'accueil de Next.js. </p><p><br /></p> <pre class="brush:php;toolbar:false;">importer {Inter} depuis 'next/font/google' const inter = Inter({ sous-ensembles : ['latin'] }) exporter la fonction par défaut index() { retour ( <div className="monindex">          dcmkl </div> ) } il s'agit du fichier global.css</pre> <p>Style ici</p> <pre class="brush:php;toolbar:false;">.myclass{ hauteur : 1000px ; largeur : 1 000 px ; image d'arrière-plan : url('./pexels-johannes-plenio-1103970.jpg'); }</pré> <p><br /></p>

Answer 1

Le meilleur endroit pour stocker des images locales est le dossier public (et ses sous-dossiers) à la racine de votre projet. Vous pouvez importer des images de cet emplacement dans votre page ou composant comme ceci

import someImage from '../public/some-path.jpg'

Ensuite, appliquez le style en ligne :

<div style={{
    backgroundImage: `url(${someImage})`,
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center',
    width: '100%',
    height: '100%'
}}>
</div>