Use blade inside a JavaScript variable

Question

I woke up this morning with a stupid question. Can you put blade inside a JavaScript variable:

 var NoImg = '{{ asset('img/ni-img.png') }}';

that will output as a string, all I need is it to output an image

Yes. Blade is a server side template engine. If your have a blade view file, her will be executed before the javascript. In your case, NoImg will have the expanded value returned by the helper asset() when the html is returned from the server. — Mauricio Rodrigues
– Mauricio Rodrigues, Commented Oct 17, 2017 at 15:57
You entirely can - in fact I've used this more times than I care to admit in Laravel. — Tor
– Tor, Commented Oct 17, 2017 at 15:57
@Yosef Yep - that will directly inject the path to your image into your JS string's single-quotes. If you needed to then use that string as an image, you'd need to set an img .src to the path. — Tor
– Tor, Commented Oct 17, 2017 at 15:59
putting an image in a javascript variable is a bit unclear. Do you mean a url? or what. — user400654
– user400654, Commented Oct 17, 2017 at 15:59

ceejayoz · Accepted Answer · 2017-10-17 16:18:34Z

3

Yes, but it's best to use json_encode to make sure the resulting output is JavaScript-friendly:

var NoImg = {!! json_encode(asset('img/ni-img.png')) !!};

PHP will add the quotation marks (for strings), any necessary escaping characters (if you have a ' in your filename, for example), and will handle more complex data structures like arrays/objects too.

answered Oct 17, 2017 at 16:18

ceejayoz

181k42 gold badges311 silver badges382 bronze badges

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

Comments

Tor · Accepted Answer · 2017-10-17 16:06:23Z

1

Yep - that will directly inject the path to your image into your JS string's single-quotes.

If you needed to then use that string as an image, you'd need to set an img .src to the path, like

document.getElementByID('myImage').src = '{{ asset('img/ni-img.png') }}'

answered Oct 17, 2017 at 16:06

Tor

7841 gold badge15 silver badges28 bronze badges

Comments

Mauricio Rodrigues · Accepted Answer · 2017-10-17 16:09:30Z

0

Yes. Blade is a server side template engine. If your have a blade view file, her will be executed before the javascript. In your case, NoImg will have the expanded value returned by the helper asset() when the html is returned from the server.

This will be work fine:

<?php
    // variable from your controller...
    $image = 'https://images.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png';
?>

// your js inside of a blade file...
var image = new Image(272, 92);
image.src = '{{ $image }}'; // or asset("path/to/your/image.png")
document.body.appendChild(image);

answered Oct 17, 2017 at 16:09

Mauricio Rodrigues

8057 silver badges9 bronze badges

Collectives™ on Stack Overflow

Use blade inside a JavaScript variable

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