Next.js: Webpack-Loader für Bilder, um sie in einen statischen Ordner zu verschieben

Erstellt am 28. Apr. 2017  ·  3Kommentare  ·  Quelle: vercel/next.js

Ich möchte Bilder importieren können wie:

import image from './image.png; // image variable should have static url

Mein Lader sieht so aus ( next.config.js ):

module.exports = {
  webpack: config => {
    // handle images
    config.module.rules.push({
      test: /\.(ico|gif|png|jpg|jpeg|svg|webp)$/,
      use: [
        {
          loader: 'emit-file-loader',
          options: {
            name: 'dist/[path][name].[ext]',
          },
        },
        {
          loader: 'file-loader',
          options: {
            context: 'public',
            name: '/static/images/[name]-[hash].[ext]',
            publicPath: '/',
          },
        },
      ],
    });

    return config;
  },
};

Ergebnis ist fast gut.

Bilddatei befindet sich in .next/static/images/image-ef89065b898bb1e3e802c62e4b264417.png

image Variable /static/images/image-ef89065b898bb1e3e802c62e4b264417.png , aber wenn ich versuche, ein Bild mit http://localhost:3000/static/images/image-ef89065b898bb1e3e802c62e4b264417.png zu laden, erhalte ich einen 404-Fehler.

Irgendwelche Ideen?

ps. Ich möchte keine Dateien manuell in den Ordner static . Ich möchte, dass sich Bilder, die sich auf eine Komponente beziehen, im selben Ordner wie die Komponente selbst befinden

Hilfreichster Kommentar

Dies ist derzeit nicht möglich.
Wir könnten früher etwas dafür tun.

Alle 3 Kommentare

Dies ist derzeit nicht möglich.
Wir könnten früher etwas dafür tun.

Gibt es darüber irgendwelche Neuigkeiten?

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen