¿Porque no me carga la imagen usando pug en webpack?

Avatar

Hola buenas tardes, he tratado de subir una imagen en pug mediante webpack pero no no llega a mostrarse, alguien me podría decir cual es el error que estoy cometiendo por la cual no sube mi imagen, muchas gracias.

13respuestas
Avatar

hola, lo que sucede es que necesitas los loader de: file-loader e image-webpack-loader.

Avatar

si claro eso lo tengo en otro test, donde esta mi jpg, jpeg, etc, o donde necesariamente debo poner el file-loader

Avatar

No olvides el "resolve-url-loader" aquí te dejo un ejemplo:

{
        test: /\.(pug)$/,
        use: [
          {
            loader: 'pug-loader',
            options:{
              pretty: true
            },
          }
        ]
      },
      {
        test: /\.(css|scss)$/,
        use: [

          {
            loader: 'style-loader'
          },
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              sourceMap:true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              autoprefixer: {
                browser: ['last 2 versions']
              },
              sourceMap: true,
              plugins: () => [autoprefixer]
            }
          },
          {
            loader: 'resolve-url-loader',
          },
          {
            loader: 'sass-loader',
            options: {

              sourceMap:true
            }
          },
        ]
      },
      {
        test: /\.(jpe?g|png|gif|svg|webp)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'assets/[name].[ext]'
            }
          },
          {
            loader: 'image-webpack-loader',
            options: {
              bypassOnDebug:true
            }
          },
        ]
      },
      {
        test: /\.(ttf|eot|woff2?|mp4|mp3|txt|xml|pdf)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'assets/[name].[ext]'
            }
          }
        ]
      },
Avatar

muchas gracias, probare con eso haber si, como subiste esa imagen, disculpa soy nuevo en esto y quería subir el mio para que vieras pero le doy en el icono Picture icon y solo me sale letras

Avatar

de nada descuida, pues selecciona donde está este símbolo </> e inserta tu fragmento de código diciéndole que lenguaje es.

Avatar

JavaScript const HtmlWebpackPlugin = require('html-webpack-plugin'), MiniCssExtractPlugin = require('mini-css-extract-plugin'), CleanWebpackPlugin = require('clean-webpack-plugin'), autoprefixer = require('autoprefixer')

module.exports = { entry: { js: './src/index.js' }, output: { filename: 'name.chunkhash.js' }, devtool: 'source-map', module: { rules: [ { test: /.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader' } },

  {
    test: /\.tpl.html$/,
    use: 'es6-template-string'
  },

  {
    test: /\.html$/,
    use: [
      {
        loader: 'html-loader',
        options: { minimize: true }
      }
    ]
  },

  {
    test: /\.pug$/,
    use: [
        {
        loader: 'pug-loader',
        options: {
            pretty: true
            }
        }
    ]
  },

  {
    test:/\.(css|scss)$/,
    use: [
      'style-loader',
      MiniCssExtractPlugin.loader,
      'css-loader?minimize&amp;sourceMap',
      {
        loader: 'postcss-loader',
        options: {
          autoprefixer: {
            browser: [ 'last 2 versions']
          },
          sourceMap: true,
          plugins: () => [autoprefixer]
        }
      },
      'resolve-url-loader',
      'sass-loader?outputStyle=compressed&amp;sourceMap'
    ]
  },

  {
    test: /\.(jpe?g|png|gif|svg|webp)$/i,
    use: [
      {
        loader: 'file-loader',
        options: {
          name: 'assets/[name].[ext]'
        }
      },
      {
        loader: 'image-webpack-loader',
        options: {
          bypassOnDebug:true
        }
      },
    ]
  },
  
  {
    test: /\.(ttf|eot|woff2?|mp4|mp3|txt|xml|pdf)$/i,
    use: [
      {
        loader: 'file-loader',
        options: {
          name: 'assets/[name].[ext]'
        }
      }
    ]
  },

  {
    test: /\.tsx?$/,
    exclude: /node_modules/,
    use: {
      loader: 'ts-loader'
    }
  }
]

}, plugins: [ new CleanWebpackPlugin('dist/*/.*'), new MiniCssExtractPlugin({ filename: 'name.chunkhash.css', chunkFilename: 'id.css' }), new HtmlWebpackPlugin({ template: './src/index.pug', filename: 'index.html', chunks: 'js', }) ] }

Avatar

La verdad no salio igual jaja, pero bueno eso es lo que tengo y le aumente a pug lo que falta, pero igual no me muestra la imagen

Avatar

haz mirado que tengas instaladas las dependencias ?

Avatar

si baje el repositorio del curso de webpack y quería trabajar con pug instale dos devDependencias: "pug-html-loader" y "pug-loader", me carga todo el contenido como títulos párrafos pero cuando quiero poner img(src="./img/banner.png") no lleva a mostrar la imagen

Avatar

pues solo se necesita "pug-loader", construye el proyecto y date cuenta si carga la imagen en la carpeta public

Avatar

Si cuando ejecuto en modo producción, la imagen no carga en la carpeta public

Avatar

debe de haber algún inconveniente con el "file-loader", dime te cargan algunos de estos archivos (ttf|eot|woff2?|mp4|mp3|txt|xml|pdf) ?

Avatar

en el html si normal carga solo falla para el pug en subir imagen y mp4 y eso

Recuerda iniciar sesión para participar en la comunidad.