我是vue.js的初學者，我正在嘗試動態顯示圖片，但在動態顯示方面遇到了問題，如果我手動更改它們，它們可以正常工作。我找到了許多類似的問題，但有些差異，沒有一個能幫助我。
這是我的結構：
-src --assets ---pizza ----pizza-1.jpg ----pizza-2.jpg ---hamburger ----hamburger-1.jpg ----hamburger-2.jpg ---french-fries ----french-fries-1.jpg ----french-fries-2.jpg --components --DBjson ---main.json
我正在嘗試創建這個循環：
`export default { name: "restaurant", data() { return { restInfo: this.$attrs.restData, }; }, methods: { getImage(folderName, imageName) { let image = require.context("@/assets/"); return image("./" folderName "/" imageName); }, }, };`![]()
我的JSON檔：
{ "id": 1, "name": "pizza", "price": "$10", "mainImage": "pizza-1.jpg", "images": ["pizza-2.jpg", "pizza-1.jpg"], },
getImage應該使用圖像的完整相對檔案路徑來要求並返回圖像
Vue 2.x
getImage(folderName, imageName) { return require(`@/assets/${folderName}/${imageName}`) }Vue 3.x Vite
據我所知，Vite無法處理'@'別名用於此特定任務，所以請確保根據需要設定您的路徑
getImage(folderName, imageName) { return new URL(`../assets/${folderName}/${imageName}`, import.meta.url).href; }