vue.js - 如何使用 props 在 vue.js 中传入 img src？

Question

我有一个info-card.vue在登录页面中使用两次的组件，但我希望在每个组件中显示不同的数据。这是info-card.vue组件：

<template>
    <div class="card-container glass-effect">
        <div class="illustration-container">
            <img src="{{ image }}" alt="Businesses" class="illustration">
        </div>

        <div class="title-container">{{ title }}</div>

        <div class="paragraph-container">{{ content }}</div>
    </div>
</template>

<script>
export default {
    props: ['image','title', 'content']
}
</script>

这是使用该组件的landing-info.vue页面：info-card

<div class="business-side">
    <info-card image="/images/image1.png" title="BUSINESSES" content="This is some content"></info-card>
</div>

<div class="customer-side">
    <info-card image="/images/image2.png" title="CUSTOMERS" content="This is some content"></info-card>
</div>

但这没有用，我是 vue 新手，有什么想法吗？

标签： vue.js

Answer 1

你不能在 vue 属性中使用 mustache {{ }}。而是使用v-bind:attr=""or :attr=""whereattr是您要绑定的动态属性。

因此，您的图像组件应该是：

<img v-bind:src="image" alt="Businesses" class="illustration" />

或者

<img :src="image" alt="Businesses" class="illustration">

冒号是 v-bind 的简写。在此处阅读有关v-bind 的更多信息。