VUE/NUXT webpack解决所需映像文件上的错误 [英] Vue / Nuxt webpack resolve error on require image file

问题描述

尝试要求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/post内每个帖子的文件夹中。我的启动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 build命令的一部分调用，例如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}`)

我做错了什么？我该怎么解决这个问题？感谢任何指导！

推荐答案

正常。

原来问题出在我用来做缩略图的名字上--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解决所需映像文件上的错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！