Vue / Nuxt webpack解决需要图像文件的错误

Question

我在尝试要求我知道我的 v-img 组件 here 中存在的图像文件时遇到 webpack 错误：

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

背景：

我有一个使用 nuxt-content 的 blog。

该项目的组织方式使图像与 /content/posts 中每个帖子的文件夹中的帖子 .md 文件一起分组。我的起始v-img component 工作正常，需要这些图像没问题。 （注意最后一个链接指向已部署的主分支，而前面的链接指向功能分支）

我的deployed site 加载速度很慢，所以我写了一个python program 来生成较小版本的图像，所有图像都存储在每个 slug 文件夹内的 .imgs 文件夹中，如下所示：

 - content/
   - posts/
     - post-slug-one/
       - index.md
       - my_image1.jpg
       ...
       - .imgs/
         - my_image1_large.jpg
         - my_image1_tn.jpg
         ...

python 程序作为我的 netlify 构建命令的一部分被调用，例如python3 ./gen_tn.py && nuxt build && nuxt generate。这很好用。

为避免在本地阻塞磁盘空间，我在开发时使用 NODE_ENV 仅使用完整大小；这也很好用，但我暂时禁用了它来测试。

我在本地生成了缩略图进行测试，但是当我上线的时候问题就来了：

return require(`~/content${this.dirp}/.imgs/${name}_${imgsize}${ext}`)

我得到一个例外：

Error: Cannot find module './content/posts/sept-2021-photos-things/.imgs/pos_DSC01274_large.jpg'
    at webpackContextResolve (content.*$:752)
    at webpackContext (content.*$:747)
    at VueComponent.imgSrcFancy (VImg.vue:59)
    at Proxy.render (VImg.vue?ad21:7)
    at VueComponent.Vue._render (vue.runtime.esm.js:3548)
    at VueComponent.updateComponent (vue.runtime.esm.js:4055)
    at Watcher.get (vue.runtime.esm.js:4479)
    at Watcher.run (vue.runtime.esm.js:4554)
    at flushSchedulerQueue (vue.runtime.esm.js:4310)
    at Array.<anonymous> (vue.runtime.esm.js:1980)

但是这个文件存在：

MBPro:bst-blog$ ls content/posts/sept-2021-photos-things/.imgs/pos_DSC01274_large.jpg
content/posts/sept-2021-photos-things/.imgs/pos_DSC01274_large.jpg

我什至尝试对图像大小进行硬编码，但这也不起作用：

return require(\`~/content${this.dirp}/.imgs/${name}_large${ext}`)

我做错了什么？我该如何解决？任何指导表示赞赏！

Answer 1

好的。

原来问题出在我用于缩略图的名称上——webpack 不喜欢 .imgs。将其更改为 imgs（或 gen_tn_imgs 以使向 .gitignore 添加特定规则变得容易，在我的情况下）。

我的最后一个块是这样的：

 methods: {
    imgSrcFancy (imgsize) {
      try {
        // if in production, unless no imgsize is specified, use .imgs instead of fullsize
        if (imgsize === '' || imgsize === 'orig' || process.env.NODE_ENV === 'development') {
        // if (imgsize === '') { // temporarily force always use .imgs for testing only
          console.log('fallback on full-rez load')
          return require(`~/content${this.dirp}/${this.src}`)
        } else { // production and imgsize not empty
          const 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)
          return require(`~/content${this.dirp}/gen_tn_imgs/${name}_${imgsize}.png`) // working
        }
      } catch (error) {
        console.log('error with finding image for:  ' + this.src)
        console.log(error)
        return null
      }
    }
  }

它是这样称呼的：

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