我正在使用 v-for 在卡上加載資料。影像未顯示，不知道為什么。我雖然:src = "'item.img'"或:src = "{{item.img}}"會作業，但都沒有作業。
這是我的代碼
<div v-for="(item, index) in basicData" :key="index">
<transition class="slide">
<div v-if="index >= start && index < end" class="card">
<div class="card-body">
<h5 class="card-title">{{item.title}}</h5>
<img
:src="'item.img'"
class="card-img-top"
:alt="'item.img'"
style="margin: 20px 5px"
/>
<p class="card-text">Some quick example text.</p>
</div>
</div>
</transition>
這是螢屏截圖
src="../assets/featured/pizzaOne.jpeg"
當我對影像進行硬編碼時。
uj5u.com熱心網友回復：
您可以創建方法或計算屬性：
methods() {
getImage(imagePath) {
return require(imagePath);
}
}
然后在模板中呼叫該方法：
<img
:src="getImage(item.img)"
class="card-img-top"
:alt="item.img"
style="margin: 20px 5px"
/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/412193.html
標籤：
上一篇：嘗試最大寬度時影像不縮小
下一篇：D3影像SVG未顯示