很抱歉，如果我是vue的新手，并且把自己搞得一團糟。我試圖用一個來自物件屬性的 src 來渲染一個圖片，該物件屬性來自我從 data()回傳的陣列
。我沒有收到任何錯誤，但是我沒有看到任何圖示出現，我使用了同一目錄下的其他圖片，沒有任何問題，所以我假設我的語法只是錯誤的，我已經驗證了img src是正確的，我在谷歌上沒有看到不同的方法，所以我希望有人能給我一些啟示:)
我發現我的圖片來自物件屬性，而物件屬性來自我從data()回傳的陣列。
我發現，如果我使用
，的確會出現錯誤。v-bind:src="getImage（imagePath）"
如果我這樣做，看起來 vue 在尋找檔案，但在控制臺中回傳一個錯誤，說它找不到該專案，我在 for 回圈之外的其他地方使用了該檔案，它作業得很好。
我的控制臺也正確顯示了渲染時源代碼中的img src
模板
<! -- active agencies -->
<b-tab title="Active" active>。 <b-card-text>>
<ul class="pendingAgencyList"/span>>
<li v-for="agent in pendingAgency" ：key="agent。 狀態">
<div v-if="agent。 Status == 'active'" class="pendingAgencyItem">
<img :src="agent.Icon"/span> :key="agent. 狀態" 高度="30px" 寬度="30px"/>/在此添加圖片
<small>Name</small>
<p>{{ agent.Name }}</p>
</div>/span>
<div v-if="agent。 Status == 'active'" class="pendingAgencyItem">
<small>/span>Contact</small>/span>
<p>{{agent.Contact}}</p>/span>
</div>/span>
<p v-if="agent。 Status == 'active'" >{{agent.Status}}</p>
</li>/span>
</ul>/span>
</b-card-text></b-tab>
作為參考，這里有一個我的資料樣本
data（）{
return {
pendingAgency:[
{
Icon: './assets/agency_logo-2.png',
Name: "Moony Fox"。
聯系: "345-235-7685",
Status: "待定"。
},
{
Icon: './assets/agency_logo-5.png',
Name: "Bofy Fox"。
聯系。"345-235-7685",
Status: "Rejected"。
},
{
Icon: './assets/agency_logo-3.png',
Name: "重罪莫"。
聯系: "345-235-7685",
Status: "red"
uj5u.com熱心網友回復：
如果你可以嘗試設定資料，如：
{
Icon。' agency_logo-3'。
...
}
然后創建方法：
methods: {
getImage(img) {
return require('./assets/' img '.png';
}
}
然后在模板中呼叫方法：
<img :src="getImage（agent. Icon)" :key="agent.Status" height="30px" width="30px"/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/309077.html
標籤：