👋 Tengo un problema: intento cargar una ruta de imagen dinámicamente, así:

 <img :src="require(`@/assets/images/box-packaging-0@2x.png?format=${webPFormat('png')}&width=950&nearlossless=1&compression=4`)">

pero me sale este error:

[Vue warn]: Error in render: "Error: Cannot find module './box-packaging-0@2x.png?format=webp&width=950&nearlossless=1&compression=4'" thus, the element is not being rendered.

También intenté poner el requerimiento dentro de un método:

 getImg () { return require(`@/assets/images/box-packaging-0@2x.png?format=${this.webPFormat('png')}&width=950&nearlossless=1&compression=4`); }

Y el elemento img HTML compilado se vuelve como src=(unknown)

Y sí, la función webPFormat('png') está funcionando y devolviendo el valor esperado (String).

Como nota al margen, incluso si codifico la fuente de la imagen como:

 <img src="@/assets/images/box-packaging-0@2x.png?whatever=myparams&are=theyare&being=ignored">

Y el HTML compilado sería simplemente <img src="/images/box-packaging-0@2x.**VueHash**.png"> sin los parámetros.

¿Alguien tiene alguna idea de cómo solucionar este problema? 😭

Muchas gracias por tomarse el tiempo de leer 👍 ✨

PD: si se pregunta por qué los parámetros en la imagen, es porque ahora estamos usando un CDN para servir archivos e imágenes estáticos que podemos cambiar de tamaño y manipular a pedido, por lo que agregamos a nuestra configuración de paquete web:

 publicPath: process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'test' ? process.env.VUE_APP_CDN_URL + '/' : '/',

Por lo tanto, los activos en producción se sirven como https://cdn.com/images/image.png en lugar de https://myvueappsite.com/images/image.png .