Laravel - Javascript can not find images when path changes

Question

in my Laravel template I include a JS-file.

Here I am using a plugin which needs images.

    $.backstretch([
        "../img/header-tt-big.jpg",
        "../img/header-soccer-big.jpg"
    ]

So.. when I go to my "startpage" like this it is working: http://localhost/project/public/de/p1

When I go here it won't work http://localhost/project/public/de/p1/register

I would have to add another "../" for all images in the JS-file. How can I make this work without changing the array manually everytime?

Thank you :)

lukasgeiter · Accepted Answer · 2015-01-19 17:12:09Z

8

As @ITroubs pointed out, if you have the javascript code inside a blade template (<script> tag) you can and should use asset() to generate the URLs. But don't forget the extra quotes so javascript interprets it as string.

$.backstretch([
    "{{ asset('img/header-tt-big.jpg') }}",
    "{{ asset('img/header-soccer-big.jpg') }}"
]

However if you have the javascript code in separate .js files (which is actually recommended) you can't do that. Instead I suggest you define a assetBaseUrl in your layout blade template before the javascript code that needs it:

<script>
    var assetBaseUrl = "{{ asset('') }}";
</script>

Usage:

$.backstretch([
    assetBaseUrl + "img/header-tt-big.jpg",
    assetBaseUrl + "img/header-soccer-big.jpg"
]

answered Jan 19, 2015 at 17:12

lukasgeiter

154k29 gold badges349 silver badges280 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ITroubs · Accepted Answer · 2015-01-19 22:07:14Z

0

If you use blade then write the backstretch like this:

$.backstretch([
    "{{asset("img/header-tt-big.jpg")}}",
    "{{asset("img/header-soccer-big.jpg")}}"
]

edited Jan 19, 2015 at 22:07

answered Jan 19, 2015 at 16:11

ITroubs

11.2k4 gold badges30 silver badges25 bronze badges

Comments

gerti · Accepted Answer · 2015-01-19 22:08:30Z

0

Okay I added the script as inline in a script-tag. But i did put it in a seperate file like p1-inline.blade.php. So i can just include that one. Thank you ;)

answered Jan 19, 2015 at 22:08

gerti

1952 silver badges9 bronze badges

Collectives™ on Stack Overflow

Laravel - Javascript can not find images when path changes

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related