0

尝试在此处要求我知道我的 v-img 组件中存在的图像文件时出现 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的博客。

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

我部署的站点加载速度很慢，所以我编写了一个python 程序来生成较小版本的图像，所有图像都存储在每个 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}`)

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

4

1 回答 1

0

行。

原来问题出在我用于缩略图的名称上——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>
于 2021-10-06T23:42:36.687 回答