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

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.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related