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

by

0👍

✅

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>

0👍

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

Leave a comment