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

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 días 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 días 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 días hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

3 días hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

3 días hace

Solución: Apache – Server unable to read htaccess file

Ayer estaba editando unos archivos que son servidos con el servidor Apache y al visitarlos…

4 días hace

Esta web usa cookies.