[FIXED] Why Vue.js image component is doesn't work?

Issue

I have something problem. I wanna make a Vue.js Component. this component show something image. it similar <img>tag.If you know <img>tag, You can understand very easy to this question.

So I want make Vue component like this. my code is following below

  props: ['link,des'],
template: '<img :src={{ link }} :alt={{ des }}></img>'
}),

this code is javascipt

html code is following below

  <image link="https://kr.vuejs.org/images/logo.png" des="sans"></image>

pls answer me kindly. Thank you

Solution

First of all, you can't use the reserved keyword (image) as a component. Then you don't need to use curly brackets for the HTML attributes. Here is the working example.

Vue.component('my-image', {
  props: ['link', 'des'],
  template: `<img :src='link' :alt='des'></img>`
});

new Vue({
  el: '#app'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<my-image id='app' link="https://kr.vuejs.org/images/logo.png" des="sans"></my-image>

Answered By - tuhin47

Answer Checked By - Mildred Charles (PHPFixing Admin)