DEV Community

Discussion on: Minify, generate WebP and lazyload images in your Vue & Nuxt application

View post
Collapse
 
justdevelop profile image
JustDevelop •

If I want to dynamically set the image path, then it is crashing with the following error:

Error: Cannot find module './path-to/image.jpg?resize&size=750&format=webp'
at webpackContextResolve (eval at ./assets/images sync recursive

My code:

...
      <source
        :data-src="getPath('?resize&size=750&format=webp')"
        type="image/webp"
        :media="`(max-width: 768px)`"
      />
...

...
  methods: {
    getPath(suffix) {
      suffix = typeof suffix === 'undefined' ? '' : suffix
      return require('~/assets/images/' + this.src + suffix)
    },
  }
...
Enter fullscreen mode Exit fullscreen mode
Collapse
 
justdevelop profile image
JustDevelop •

Where this.src is a prop. It is all working without the suffix parameters. But when I add the suffix (thus, the nuxt-optimised-images params), the code fails and I get this error.

I have been on this for days. I just cannot fix this issue and I am willing to learn more about my problem but I don't know where to look. I hope someone can clarify this to me, since I think this dynamic declaration is essential.

Collapse
 
ignore_you profile image
Alex • • Edited

I don't work with Vue now, so unfortunately I can't reproduce and examine your code. Though, I have an opinion that adding suffix dynamically might be impossible due to nature of methods. Methods are client-side, they apply in runtime, so creation of webp images with specific size cannot be done, 'cause this is a server-side action.