我正在學習如何使用 VueJS 并設法制作一個顯示餐廳菜單的簡單頁面（在單個文件中）。現在我正在使用 vue-cli 并重構我所做的事情：除了圖像之外，一切都正常。我的結構是這樣的：/node_modules/public/src /assets /picture.jpg /[...] /components /MenuItem.vue App.vue main.ts在 src/App.vue 中：<template>[...] <ul> <MenuItem v-for="plat in plats" :name="plat.name" :price="plat.price" :url="plat.url" :role="role" :plat="plat" :supprimer="supprimer" :key="plat.name" /> </ul>[...]</template><script>import MenuItem from './components/MenuItem'export default { name: 'App', components: { MenuItem }, data() { return{ plats: [ {name: "Steak de boeuf", price: 5.99, url: "/assets/steak.jpg"}, {name: "Coq au vin", price: 8.99, url: "/assets/coq.jpg"}, {name: "Gencives de porc", price: 12.99, url: "/assets/porc.jpg"}, {name: "Entrée", price: 4.99, url: "/assets/entrée.jpg"}, {name: "Plat du jour", price: 14.99, url: "/assets/plat.jpg"}],[...]</script>在 src/components/MenuItem.vue 中：<template> <li class="plat"> <img :src="url"/><p> {{ name }} - {{ price }}€</p> <p v-if="role=='admin'" @click="supprimer(plat)"> Supprimer le plat </p> </li></template><script>export default { name: 'MenuItem', props: ['name','price','url','role','plat','supprimer']}</script>我認為這可能是因為圖片的路徑，但我嘗試了絕對/相對路徑，但沒有任何效果。我嘗試將路徑更改為“./assets/...”、“./src/assets/...”等，因為我不確定vuejs從哪個位置搜索圖片。當我運行代碼時，一切都顯示正確，除了圖像被“未找到圖像”符號替換：結果
3 回答
森林海
TA貢獻2011條經驗 獲得超2個贊
這取決于您保存圖像的位置。在您的情況下使用require路徑src：(@)
plats: [
? ? {
? ? ? name: "Steak de boeuf",
? ? ? price: 5.99,
? ? ? url: require('@/assets/steak.jpg')
? ? }
]
鴻蒙傳說
TA貢獻1865條經驗 獲得超7個贊
正如阿爾伯特在評論中所說，您至少有兩種加載圖像的方法：刪除斜杠（例如， ），或者更好的是，通過在相對路徑之前assets/foo.jpg添加一個來鏈接它們，例如： ; 簡而言之，加載相對路徑，例如如果你想鏈接Bootstrap，而代表.@@/assets/foo.jpg~/node_modules/@/src/
至尊寶的傳說
TA貢獻1789條經驗 獲得超10個贊
這是因為 v-bind 中的表達式是在運行時執行的，而 webpack 別名是在編譯時工作的。
嘗試像這樣包裝你的網址require：
{name: "Steak de boeuf", price: 5.99, url: require("assets/steak.jpg")}- 3 回答
- 0 關注
- 169 瀏覽
添加回答
舉報
0/150
提交
取消