Image source can't resolve

I try to show image but it can't show , it goes to url http://127.0.0.1:8000/mywedding/public/assets/images/cpp-test.jpg but its return not found so i change from this, here code from resources/js/views/components/Mempelai.vue

</template>

<script>
    export default {

    }
</script>

<style scoped>
.m-name {
    font-family: Greenlight Script;
}

.pl {
    width: 200px;
    height: 200px;
    padding: 1rem;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    mask-image: url('/mywedding/public/assets/images/mask.png');
    -webkit-mask-image:  url('/mywedding/public/assets/images/mask.png');
    mask-size: 200px;
    -webkit-mask-size: 200px;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    background-image: url('/mywedding/public/assets/images/cpp-test.jpg');
}

to this

 mask-image: url('assets/images/gallery/mask.png');
 -webkit-mask-image:  url('assets/images/gallery/mask.png');

but it turn error when i run npm run dev the error msg

Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve 'assets/images/gallery/mask.png' in 'C:\xampp\htdocs\vc\wedding-digital-invitation-master\resources\js\views\components'
    at finishWithoutResolve (C:\xampp\htdocs\vc\wedding-digital-invitation-master\node_modules\enhanced-resolve\lib\Resolver.js:309:18)
    at C:\xampp\htdocs\vc\wedding-digital-invitation-master\node_modules\enhanced-resolve\lib\Resolver.js:386:15
    at C:\xampp\htdocs\vc\wedding-digital-invitation-master\node_modules\enhanced-resolve\lib\Resolver.js:435:5
    at eval (eval at create (C:\xampp\htdocs\vc\wedding-digital-invitation-master\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:16:1)
    at C:\xampp\htdocs\vc\wedding-digital-invitation-master\node_modules\enhanced-resolve\lib\Resolver.js:435:5
    at eval (eval at create (C:\xampp\htdocs\vc\wedding-digital-invitation-master\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:27:1)

i try to implement solution from internet using

./../../assets/images/gallery/mask.png

but it still no work

here laravel folder https://github.com/salmanagustian/wedding-digital-invitation

Image source can't resolve

0 Answers