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
.
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.
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
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Ayer estaba editando unos archivos que son servidos con el servidor Apache y al visitarlos…
Esta web usa cookies.