¿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.

Avatar

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

Necesitas iniciar sesión para responder.
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

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

Necesitas iniciar sesión para responder.
Necesitas iniciar sesión para responder.