我正在嘗試將從 API 獲取的 id 添加到影像 url 的末尾，以便它是回圈中每張卡片的不同影像。我認為 img-src 可能只接受一個字串，而 v-bind 只接受一個屬性
<b-card
v-bind:header="course.title"
v-for="course in courses"
:key="course.id"
overlay
img-src="https://picsum.photos/500/300/?image=26"
img-alt="如何向卡片 (vue-bootsrap) 中的影像鏈接添加變數？"
header-
>
<div >
<b-button :to="{ name: 'viewCourse', params: { id: course.id}}" variant="warning">View</b-button>
<b-button :to="{ name: 'editCourse', params: { id: course.id}}" variant="warning">Edit</b-button>
</div>
</b-card>
我試過：
在末尾添加一個 （錯誤說 不被接受）
添加 {{course.id}} 代替 url 末尾的靜態數字（錯誤說明已洗掉屬性內的插值并使用 v-bind 或 :id）
使用 v-bind: 在 img-src 上（錯誤說 v-bind 需要一個屬性）。
在最后添加 {{v-bind:course.id}} （與 {{course.id}} 相同的錯誤）
可以使用 img-src 屬性，還是我必須以不同的方式來做？
uj5u.com熱心網友回復：
問題
這里的問題是，使用 v-bind 指令（由冒號縮寫），這些引號之間的行被決議為 Javascript。這意味著您需要一對不同的引號來表示字串并將變數連接到它。
img-src="without v-bind this is just text" // OK
:img-src="with v-bind this is javascript so it gives an error" // NOT OK
:img-src="'with v-bind and single quotes this is a valid javascript string'" // OK
解決方案
使用模板文字：
:img-src="`https://picsum.photos/500/300/?image=${course.id}`"
使用帶連接的字串：
:img-src="'https://picsum.photos/500/300/?image=' course.id"
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/385873.html