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

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

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 ñ en impresora térmica

En este post te enseñaré a imprimir la letra ñ en una impresora térmica. Voy…

1 día hace

Tramitar acta de nacimiento en línea de manera instantánea

En este post te quiero compartir mi experiencia tramitando un acta de nacimiento de México…

2 días hace

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

2 semanas hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

3 semanas hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

3 semanas hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

3 semanas hace

Esta web usa cookies.