[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-nuxt3-vue-3-動態取得圖片":3},{"id":4,"slug":5,"title":6,"description":7,"content":8,"date":9,"image":10,"imageAlt":6,"author":11,"categories":14,"path":20,"minRead":21},3775,"nuxt3-vue-3-動態取得圖片","Nuxt3 \u002F Vue 3 動態取得圖片","Nuxt3 \u002F Vue 3 動態取得圖片 參考資料 https:\u002F\u002Fwww.lichter.io\u002Farticl […]","\u003Ch1>Nuxt3 \u002F Vue 3 動態取得圖片\u003C\u002Fh1>\n\u003Cp>參考資料\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fwww.lichter.io\u002Farticles\u002Fnuxt3-vue3-dynamic-images\u002Fhttps:\u002F\u002Fclairechang.tw\u002F2023\u002F09\u002F12\u002Fnuxt3\u002Fnuxt-v3-assets-vs-public\u002F\">https:\u002F\u002Fwww.lichter.io\u002Farticles\u002Fnuxt3-vue3-dynamic-images\u002Fhttps:\u002F\u002Fclairechang.tw\u002F2023\u002F09\u002F12\u002Fnuxt3\u002Fnuxt-v3-assets-vs-public\u002F\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>把圖片放在assets中後，通常來說會使用這兩種寫法\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-jsx\"><img src="@\u002Fassets\u002Fimage\u002Flogo.jpg"> \n<img src="..\u002Fassets\u002Fimage\u002Flogo.jpg">\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>但只限於靜態圖片，如果想要動態取用圖片。\u003Cbr \u002F>\n例如有10張圖片，檔名是1~10，例如001.jpg ~ 010.jpg\u003C\u002Fp>\n\u003Cp>以前我偷懶會這樣處理：\u003Cbr \u002F>\n放在 public 中，直接取用\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-jsx\"><img src="`\u002Fimage\u002F${index}.jpg`">\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>但這種作法有些缺點，\u003C\u002Fp>\n\u003Cul>\n\u003Cli>圖片將被瀏覽器快取住，因此如果我們想要更改圖像，我們也必須更改檔案名稱。這不是最佳的，特別是如果我們想在多個地方使用相同的圖像。\u003C\u002Fli>\n\u003Cli>效能問題，圖片不會被Vite插件之類最佳化。\u003C\u002Fli>\n\u003Cli>圖片將以原始大小加載，如果尺寸很大，同樣也有瀏覽器效能問題。\u003C\u002Fli>\n\u003Cli>管理不一致，這是我的使用習慣，我不喜歡圖片要放在public裡面，比較偏好在assets中一起管理。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>如果換成assets中的話….\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-jsx\"><img src="..\u002Fassets\u002Fimage\u002F${index}.jpg`">\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>會失效。代表取用不到資源\u003C\u002Fp>\n\u003Cp>如果找解決方式可能會找到 Vue2 時代的作法，加入 \u003Cstrong>require，\u003C\u002Fstrong>例如\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-jsx\"><img :src="require(`...\u002Fassets\u002Fimage\u002F${index}.jpg`)" :alt="selectedDog">\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>但這個作法在Vue3 \u002F Nuxt3 不能用了，因為Vite不支援。\u003C\u002Fp>\n\u003Cp>這時要使用另一個Vite的API，\u003Ca href=\"https:\u002F\u002Fvitejs.dev\u002Fguide\u002Ffeatures.html\u002F#glob-import\">\u003Cstrong>\u003Ccode>import.meta.glob\u003C\u002Fcode>\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>我的理解，\u003Ca href=\"https:\u002F\u002Fvitejs.dev\u002Fguide\u002Ffeatures.html\u002F#glob-import\">\u003Cstrong>\u003Ccode>import.meta.glob\u003C\u002Fcode>\u003C\u002Fstrong>\u003C\u002Fa>有點像是先整理所有引入資料夾中的檔案，建立成一個索引，然後透過key去對應檔名。\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-jsx\"><script setup lang="ts">\n\nconst glob = import.meta.glob('@\u002Fassets\u002Fimages\u002F*.jpg', { eager: true })\n<\u002Fscript>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>去檢查 glob 可以看到以下類似資料\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-jsx\">{\n  "\u002Fassets\u002Fimages\u002Flogo_1`.jpg": {\n    "default": "\u002F_nuxt\u002Fassets\u002Fimages\u002Flogo_1.jpg"\n  },\n  "\u002Fassets\u002Fimages\u002Flogo_2.jpg": {\n    "default": "\u002F_nuxt\u002Fassets\u002Fimages\u002Flogo_2.jpg"\n  },\n  "\u002Fassets\u002Fimages\u002Flogo_3.jpg": {\n    "default": "\u002F_nuxt\u002Fassets\u002Fimages\u002Flogo_3.jpg"\n  }\n}\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>這時我們用呼叫的圖檔名去尋找真實位置\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-jsx\"><img :src="glob[`\u002Fassets\u002Fimages\u002F${index}.jpg`]" alt="" \u002F>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>當然也有一些缺點\u003C\u002Fp>\n\u003Cul>\n\u003Cli>圖片名稱會因為Vite快取關係被更改。\u003C\u002Fli>\n\u003Cli>同樣也可能有效能消耗，因為先處理了glob的API。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>就看專案目的取決要使用何種作法囉。\u003C\u002Fp>\n","2024-10-01T00:00:25","\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2024%2F03%2Ficon-green.svg",{"name":12,"link":13},"Chih Fan","http:\u002F\u002Fpost.billxu.net",[15,17],{"name":16,"slug":16},"frontend",{"name":18,"slug":19},"Nuxt","nuxt","\u002Fblog\u002Fnuxt3-vue-3-動態取得圖片",1]