👋 I'm having a problem: I'm trying to load an image path dynamically, like this:

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

but I'm getting this 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.

I also tried putting the require inside a method:

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

And the compiled HTML img element gets like src=(unknown)

And yes, the function webPFormat('png') it is working and returning the expected value (String).

As a side note, even if I hardcode the image source like:

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

And the compiled HTML would be just <img src="/images/box-packaging-0@2x.**VueHash**.png"> without the params.

Does anyone have any idea how to workaround this issue? 😭

Thank you very much for taking the time to read 👍 ✨

PS: If you're wondering why the params in the image, is because we are now using a CDN to serve static files and images that we can resize and manipulate upon request, so we added to our webpack config:

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

So the assets in production are being served as https://cdn.com/images/image.png instead of https://myvueappsite.com/images/image.png.