Get Laravel public path in external js file

Question

I have blade file named index-game.blade.php. And in one line of it, a line that reaches a js file under laravel public folder.

<script type="text/javascript" src="{{asset('game/')}}/js/CPreloader.js"></script>

So far so good.

Also inside CPreloader.js, I have lines like this.

s_oSpriteLibrary.addSprite("bg_menu","./sprites/bg_menu.jpg");
s_oSpriteLibrary.addSprite("progress_bar","./sprites/progress_bar.png");

At this stage, I get the following error in the console of my browser's devtools screen:

bg_menu.jpg:1          GET http://127.0.0.1:8000/games/sprites/bg_menu.jpg 404 (Not Found)
progress_bar.png:1     GET http://127.0.0.1:8000/games/sprites/progress_bar.png 404 (Not Found)

This is the link where I called "index-game.blade.php" => http://127.0.0.1:8000/games/slot1 (Let's pay attention to the games word here)

It works if i change my javascript file to

s_oSpriteLibrary.addSprite("bg_menu","../game/sprites/bg_menu.jpg");
s_oSpriteLibrary.addSprite("progress_bar","../game/sprites/progress_bar.png");

Because the correct link is this instead

http://127.0.0.1:8000/games/sprites/bg_menu.jpg // wrong
http://127.0.0.1:8000/game/sprites/bg_menu.jpg // true

I don't want to change the paths in all my javascript files. Because this is a game and there are as many pictures as possible. How do I correctly identify the laravel public folder in my external js files.

Answer 1

There is a package for that: https://github.com/tighten/ziggy

Some copy/paste from docs:

Install Ziggy into your Laravel app with

composer require tightenco/ziggy

Generate javascript route file:

php artisan ziggy:generate

Import in js file and use:

// app.js

import route from 'ziggy';
import { Ziggy } from './ziggy';

// ...

route('home', undefined, undefined, Ziggy);