I am testing Vuejs with laravel mix.
I just created my component, it is called HeaderComponent.vue, I am rendering it well, it is shown in the home of the page, but I want to do the following:
<template>
<div>
<!-- Just an image -->
<nav class="navbar">
<a class="navbar-brand" href="#">
<img :src="{{ img }}" alt="Mercantil Logo" />
</a>
</nav>
</div>
</template>
<script>
export default {
data: function() {
return {
//Quiero que la ruta que escriba aqui se renderice en el template
img: "img/menu/1.png"
};
}
};
</script>
<style lang=""></style>
As I wrote in the code comment, I want what I write in img to be rendered in the src of the image, but it gives me an error, how should I do it?
When using
:src=""
(equivalent tovbind:src=""
) you don't need to enclose the expression between{{ }}
use it directlyhttps://v2.vuejs.org/v2/guide/syntax.html#Attributes