I've encountered an issue with calling a background-image in my scss file. Strangely, when I use the image tag img, everything works perfectly fine. However, as soon as I try to do the same within the <style> tags, it doesn't work and gives me the error message Can't resolve.
My setup involves Laravel and Vue, where everything is sent to the public folder. The image I'm trying to use is located in a folder named images within the public directory. On the other hand, all my Vue files are being directed to App.js inside the js folder under public.
I'm wondering what would be the correct method to call an image in Vue. Should I create an assets folder in my JS directory and place the image there?
Any assistance you can provide would be greatly appreciated. Laravel resources folder
https://i.sstatic.net/mXEPT.png
Laravel public folder
https://i.sstatic.net/vyKl1.png
<template>
<div class="hero">
<!-- works -->
<img src="images/home/wow.webp" alt="img">
<div class="hero-left">
<h1>HI</h1>
</div>
</div>
</template>
<script>
export default {
name: "Hero",
}
</script>
<style lang="scss" scoped>
.hero {
height: 90vh;
width: 100%;
background-image: url('../images/home/wow.webp'); // Does not work
img {
height: 100%;
width: 100%;
}
}
</style>