Next.js: Carregador de Webpack para imagens para movê-las para uma pasta estática

Criado em 28 abr. 2017  ·  3Comentários  ·  Fonte: vercel/next.js

Eu quero ser capaz de importar imagens como:

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

Meu carregador se parece com ( 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;
  },
};

O resultado é quase bom.

O arquivo de imagem está dentro de .next/static/images/image-ef89065b898bb1e3e802c62e4b264417.png

image variável /static/images/image-ef89065b898bb1e3e802c62e4b264417.png , mas ao tentar carregar a imagem com http://localhost:3000/static/images/image-ef89065b898bb1e3e802c62e4b264417.png obtenho o erro 404.

Alguma ideia?

ps. Não quero mover os arquivos manualmente para a pasta static . Eu quero que as imagens relacionadas a algum componente estejam na mesma pasta que o próprio componente.

Comentários muito úteis

Atualmente isso não é possível.
Podemos fazer algo para isso mais cedo.

Todos 3 comentários

Atualmente isso não é possível.
Podemos fazer algo para isso mais cedo.

Alguma novidade sobre isso?

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

knipferrc picture knipferrc  ·  3Comentários

jesselee34 picture jesselee34  ·  3Comentários

YarivGilad picture YarivGilad  ·  3Comentários

olifante picture olifante  ·  3Comentários

kenji4569 picture kenji4569  ·  3Comentários