I have a template and I need to call a background-image in my scss. Calling this image using a img tag works perfectly fine, but as soon as I try the same in my <style> tags it does not work and find it anymore and gives the error Can't resolve.

I'm using Laravel and Vue, they are all sent to my public folder where my image is correctly located. My image is located in a file called images in the public folder, while my Vue is all going to my App.js which is inside the js folder in public.

What would be the correct way to call an image in Vue? Should I add an assests folder to my JS folder and add the image there?

Thank you for any help in advance. Laravel resources folder

Laravel public folder

<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>