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

Question

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?

:src="image". The colon is important.

ceejayoz
– ceejayoz

2021-10-23 23:46:37 +00:00
Commented Oct 23, 2021 at 23:46 — ceejayoz
– ceejayoz, Commented Oct 23, 2021 at 23:46

tony19 · Accepted Answer · 2022-07-15 21:18:23Z

4

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

or

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

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

edited Jul 15, 2022 at 21:18

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 24, 2021 at 0:05

ijkML

1291 gold badge1 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related