En este post vamos a hablar sobre el trabajo en imágenes al usar webpack. A veces, webpack convertirá las imágenes a base64 y en otras ocasiones devolverá la ruta de la misma. Esto se puede configurar de acuerdo a tus necesidades, y justamente veremos cómo hacerlo configurando el url-loader.

Webpack e imágenes como base64

El comportamiento de webpack puede beneficiar o generar errores dependiendo del uso de las imágenes. Nosotros podemos importar una imagen usando require, por ejemplo:

require("@/assets/inicio/logo.png")

Pero a veces webpack va a importar la imagen como una cadena en base64. En otras ocasiones va a importar su ruta o ubicación, por ejemplo, la salida será: /static/img/logo.4283601.png

Así que no podemos confiarnos de nada, ya que webpack va a devolver la imagen codificada en base 64, y en otras ocasiones no.

En mi caso me había confiado de que siempre la devuelve como base64 así que usaba eso para imprimir una imagen en una impresora térmica, pero al probar con una imagen más grande noté que la devolvía como una ruta.

Configurar modo de importación de imágenes en webpack

Así que revisando y buscando, noté que esto se debe al url-loader que carga los archivos en general. El problema aquí era el límite, ya que por defecto webpack devuelve la imagen como base64 si la misma es pequeña; en caso contrario la devuelve como ruta.

Por lo tanto, si tú quieres que siempre devuelva las imágenes en base64, amplía el límite. Y si quieres que webpack siempre devuelva la imagen como ruta, reduce el límite.

Para encontrar la configuración debes buscar unas líneas como las siguientes:

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 500000,
    name: utils.assetsPath('img/[name].[hash:7].[ext]')
  }
},

Fíjate en que la expresión regular engloba a las imágenes, y en limit tiene 500000 (originalmente tenía 10000). Aquí puedes configurarlo. Según la documentación oficial, dice:

Habilita o deshabilita la transformación de archivos en base64.  Recibe un número o cadena especificando el máximo tamaño de archivo en bytes.

Por cierto, yo lo uso en un proyecto un poco antiguo con Vue y Vuetify. Encontré la configuración en el archivo build/webpack.base.conf.js