How to pass in img src in vue.js using props?-CodePudding

I have an info-card.vue component that is used twice in a landing page, but I want different data displayed in each of them. Here is the info-card.vue component:

<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>

And here is the landing-info.vue page that the info-card component is used in:

<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>

But this didn't work, I'm new to vue so any ideas?

CodePudding user response：

You can't use mustache {{ }} in vue attributes. Instead use v-bind:attr="" or :attr="" where attr is the dynamic attribute you want to bind.

So, your image component should be:

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

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

The colon is a shorthand for v-bind. Read more on v-bind here.