web-dev-qa-db-fra.com

Nextjs: impossible de charger des images à partir du dossier statique

Comment puis-je charger des images dans un composant dans Next.js? Dois-je d'abord construire le projet? Si oui, existe-t-il un moyen de charger les images sans construire d'abord? Je ne peux pas faire fonctionner cela, peu importe ce que j'essaie.

reactjswebpacknextjs
7
Vaggelis Stefanakis

à partir des documents:

Placez simplement vos fichiers dans le répertoire static, puis vous pourrez les référencer dans votre application comme:

<img src="/static/my-image.png" />

Je pense que next.js aura une surveillance sur ce répertoire, donc je ne pense pas que vous ayez besoin de re start votre serveur chaque fois que vous y mettez quelque chose.

Mais bien sûr, lorsque votre build de production sera mis à jour. Vous devez build chaque fois que vous modifiez quelque chose dans votre application.

13
Tomasz Mularczyk

Le répertoire statique est obsolète. Placer des fichiers dans public/static répertoire

6
c. wait

Une autre façon dont je découvre Images suivantes

installation : npm install --save next-images

ou yarn add next-images

Utilisation :

Créer un next.config.js dans votre projet

// next.config.js
const withImages = require('next-images')
module.exports = withImages()

En option, vous pouvez ajouter votre configuration Next.js personnalisée en tant que paramètre

// next.config.js
const withImages = require('next-images')
module.exports = withImages({
  webpack(config, options) {
    return config
  }
})

Et dans vos composants ou pages importez simplement vos images:

export default () => <div>
  <img src={require('./my-image.jpg')} />
</div>

ou

import myImg from './my-image.jpg'

export default () => <div>
  <img src={myImg} />
</div>
3
Md. Jamal Uddin