My goal is to dynamically create an input component with a specific icon for each input. The icon is set as a background image in the CSS, and it works when directly included like this:
background-image: url(../../assets/icons/email.svg);However, when I pass the name of the icon as a prop for the component, the app throws an error indicating that the icon is not found. https://i.sstatic.net/FYZGG.png
<template>
<section class="input-box">
<input class="input-field" type="text" :style="imgIcon">
<label>{{title}}</label>
</section>
</template>
<script>
export default {
props: ["title", "bgImg"],
computed: {
imgIcon() {
return 'background-image: url(./assets/icons/' + this.bgImg + ')';
}
}
}
</script>
When passing the name as a string:
<custome-input title="password" bgImg="'p_key.svg'"></custome-input>
The error is resolved but nothing appears on screen!
Where did I specifically go wrong?