Need help setting background image from the public folder
|_public
| |_images
| |_icon.png
|_src
|_components
|_TheHeader.vue
I'm having difficulty trying to set an image as a background in TheHeader.vue using CSS, but the image is located in the public folder.
**vue**
<template>
<input type="text" :style="background">
</template>
<script>
export default {
computed: {
background() {
return {
'background': `url(${require('/images/search-icon.png')}) 5px center no-repeat;`
}
}
}
}
</script>
Error: Module not found: Error: Can't resolve '/images/search-icon.png' in C:/user...
even absolute path doesnt work
<style scoped>
input {
background: url('../../../public/search-icon.png') 5px center no-repeat;
}
<style>
Error: Module not found: Error: Can't resolve '../../../public/search-icon.png' in 'C:\user...