Vue / Nuxt Webpack Resolve Error On Require Image File

I'm getting a webpack error when trying to require an image file I know exists in my v-img component here: imgSrcFancy (imgsize) { try { // if in production, unle

Solution 1:

Ok.

Turns out the problem was with the name I was using for the thumbnails - webpack did not like .imgs. Changing it to imgs (or gen_tn_imgs to make adding a specific rule to .gitignore easy, in my case).

My final block looks like this:

methods: {
    imgSrcFancy (imgsize) {
      try {
        // if in production, unless no imgsize is specified, use .imgs instead of fullsizeif (imgsize === '' || imgsize === 'orig' || process.env.NODE_ENV === 'development') {
        // if (imgsize === '') { // temporarily force always use .imgs for testing onlyconsole.log('fallback on full-rez load')
          returnrequire(`~/content${this.dirp}/${this.src}`)
        } else { // production and imgsize not emptyconst path = require('path')
          const ext = path.extname(this.src)
          const name = path.basename(this.src, ext)
          const loadstring = `~/content${this.dirp}/gen_tn_imgs/${name}_${imgsize}.png`console.log('fancy load from ' + loadstring)
          returnrequire(`~/content${this.dirp}/gen_tn_imgs/${name}_${imgsize}.png`) // working
        }
      } catch (error) {
        console.log('error with finding image for:  ' + this.src)
        console.log(error)
        returnnull
      }
    }
  }

and it's called like so:

<a:href="imgSrcFancy('orig')"><img:src="imgSrcFancy('large')":alt="alt"></a>