如何将变量添加到卡中的图像链接（vue-bootstrap）？

Posted 2023-02-22

【中文标题】如何将变量添加到卡中的图像链接（vue-bootstrap）？

【英文标题】：How can I add a variable to an image link in a card (vue-bootsrap)?

【发布时间】：2022-01-19 20:47:00

【问题描述】：

我正在尝试将取自 API 的 id 添加到图像 url 的末尾，以便循环中的每张卡片都有不同的图像。我认为 img-src 可能只接受一个字符串，而 v-bind 只接受一个属性

        <b-card
            class="sCardCourse m-3"
            v-bind:header="course.title"
            v-for="course in courses"
            :key="course.id"
            overlay
            img-src="https://picsum.photos/500/300/?image=26"
            img-
            header-class="text-center headHeight"
        >
            <div class="sbtn">
                <b-button class="fbtn" :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 代替静态数字（错误提示 属性内的插值已被删除并使用 v-bind 或 :id)

使用 v-bind: 在 img-src 上（错误说 v-bind 需要一个属性）。

在末尾添加 v-bind:course.id（与 course.id 相同的错误）

是否可以使用 img-src 属性，或者我必须以不同的方式进行操作？

【参考方案1】：

问题

这里的问题是使用 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"

【讨论】：

啊，我现在明白了，非常感谢，两种解决方案都可以完美运行！