我有一個包含 img 標簽的 Vuejs 組件。如果我像這樣對 src 進行硬編碼，我可以毫無問題地渲染影像。
<template>
<div>
<!-- <img alt="為什么將變數系結到 img 標簽中的 src 引數在 vuejs 中不起作用？" src="@/assets/abstractwave.png"/> -->
</div>
</template>
<script>
export default {
name: "RotatingImage",
props: {
filename: String
},
}
</script>
如果我插入系結 src 作為道具，我將無法渲染影像。如下……這是為什么？為了使用道具渲染影像，我必須改變什么？
<template>
<div>
<img class = "rotate" alt="為什么將變數系結到 img 標簽中的 src 引數在 vuejs 中不起作用？" :src="`@/assets/${filename}`" />
</div>
</template>
<script>
export default {
name: "RotatingImage",
props: {
filename: String
},
}
</script>
在瀏覽器中檢查后，我看到 src 路徑是正確的，但影像沒有顯示。
uj5u.com熱心網友回復：
您可以制作計算屬性：
computed: {
getImgUrl() {
return require(`@/assets/${this.filename}`);
}
}
然后在模板中系結它：
<img class = "rotate" alt="為什么將變數系結到 img 標簽中的 src 引數在 vuejs 中不起作用？" :src="getImgUrl" />
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/368046.html