I'm having trouble converting some code to Vue. There seems to be a rendering difference in the alt attribute of an image, and I can't figure out how to interpret the html within the attributes. I've searched for solutions but haven't found any relevant topics on this issue. Do you have any suggestions?
In my examples, I intentionally omitted the src to focus on the alternative text.
Vue.component('first-image', {
inheritAttrs: false,
template: '<div class="container-image"><img v-bind="$attrs"></div>'
});
Vue.component('second-image', {
template: '<img>',
});
new Vue({
el: '#app',
data() {
return {
alternativeText: '1 000€',
};
},
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!-- Without VueJS -->
<img alt="1 000€">
<br>
<br>
<!-- With VueJS -->
<div id="app">
<first-image :alt="alternativeText"></first-image>
<second-image alt="1 000€"></second-image>
</div>