Webpack

Webpack convierte imagen a base64

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

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

No te pierdas ninguno de mis posts

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Imprimir HTML con impresora térmica

En este post te enseñaré a imprimir HTML en una impresora térmica. Vas a ser…

2 días hace

Monitorear cola de impresión en Windows

En este artículo te voy a enseñar a monitorear la cola de impresión de una…

5 días hace

Solución: Unable to extract uploader id con youtube-dl

En mi blog te he enseñado a usar youtube-dl para descargar vídeos con permiso del…

1 semana hace

Enviar foto a Telegram usando cURL y Bot

Siguiendo con los tutoriales que consumen la API de los Bots de Telegram con cURL…

1 semana hace

cURL y Telegram: enviar mensaje a Bot

En un post previo te enseñé a enviar un mensaje en nombre de un Bot…

1 semana hace

Impresora térmica con Telegram usando Bot

En este artículo te voy a mostrar una guía para imprimir en una impresora térmica…

1 semana hace

Esta web usa cookies.