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

Question

当我尝试请求一个我知道存在于我的 v-img 组件中的图像文件时，我遇到了一个 webpack 错误 here:

    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。

项目的组织方式使图像与 post .md 文件一起分组在一个文件夹中，用于 /content/posts 中的每个 post。我的起始 v-img component 工作正常，需要这些图像没问题。（注意最后一个 link 是部署的主分支，而较早的是功能分支）

我的 deployed site is very slow to load, so I wrote a 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。这很好用。

为了避免在本地阻塞磁盘 space，我使用 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>

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

Vue / Nuxt webpack resolve error on require image file

javascript

webpack

vue.js

nuxt.js

nuxt-content