Next.js: Cargador de paquetes web para imágenes para moverlas a una carpeta estática

Creado en 28 abr. 2017  ·  3Comentarios  ·  Fuente: vercel/next.js

Quiero poder importar imágenes como:

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

Mi cargador se ve así ( 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;
  },
};

El resultado es casi bueno.

El archivo de imagen está dentro de .next/static/images/image-ef89065b898bb1e3e802c62e4b264417.png

image variable es /static/images/image-ef89065b898bb1e3e802c62e4b264417.png , pero cuando intento cargar una imagen con http://localhost:3000/static/images/image-ef89065b898bb1e3e802c62e4b264417.png obtengo el error 404.

¿Algunas ideas?

PD. No quiero mover archivos manualmente a la carpeta static . Quiero que las imágenes relacionadas con algún componente estén en la misma carpeta que el propio componente`

Comentario más útil

Actualmente esto no es posible.
Podríamos hacer algo antes.

Todos 3 comentarios

Actualmente esto no es posible.
Podríamos hacer algo antes.

¿Alguna noticia sobre esto?

¿Fue útil esta página
0 / 5 - 0 calificaciones