为什么 Vue.js 图像组件不起作用？

Question

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

Answer 1

Your property props is wrongly set. You need to split your string.

props: ['link', 'des'],

There is several way to do this. You can even specify the type of your props :

props: {
    link: String, 
    des: String
},

All details can be found in the documentation here : https://v2.vuejs.org/v2/guide/components-props.html#Prop-Types

Answer 2

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>