我越來越想需要一個影像檔案，我知道存在于我的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}`)
我究竟做錯了什么？我該如何解決？任何指導表示贊賞！
uj5u.com熱心網友回復：
好的。
原來問題出在我用于縮略圖的名稱上 - 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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/314052.html
標籤：javascript Vue.js 网络包 nuxt.js 内容
上一篇：VueWebApp-加載最新版本