在 JavaScript 变量中使用刀片答案

【问题标题】：Use blade inside a JavaScript variable在 JavaScript 变量中使用刀片
【发布时间】：2018-03-29 09:22:43
【问题描述】：

我今天早上醒来时问了一个愚蠢的问题。你能把刀片放在 JavaScript 变量中吗：

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

将输出为字符串，我所需要的只是输出图像

【问题讨论】：

是的。 Blade 是一个服务器端模板引擎。如果您有刀片视图文件，她将在 javascript 之前执行。在您的情况下，当从服务器返回 html 时，NoImg 将具有由帮助器资产（）返回的扩展值。
你完全可以——事实上我在 Laravel 中使用它的次数比我愿意承认的要多。
@Tor 你和我一样吗？
@Yosef 是的 - 这会将图像的路径直接注入到 JS 字符串的单引号中。如果您需要将该字符串用作图像，则需要将img .src 设置为路径。
将图像放入 javascript 变量中有点不清楚。你的意思是网址吗？或者什么。

标签： javascript laravel laravel-5.3 laravel-blade

【解决方案1】：

是的，但最好使用json_encode 来确保生成的输出对 JavaScript 友好：

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

PHP 将添加引号（用于字符串）、任何必要的转义字符（例如，如果您的文件名中有 '），并且还将处理更复杂的数据结构，如数组/对象。

【讨论】：

【解决方案2】：

是的 - 这会将图像的路径直接注入到 JS 字符串的单引号中。

如果您需要将该字符串用作图像，则需要将img .src 设置为路径，例如

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

【讨论】：

【解决方案3】：

是的。 Blade 是一个服务器端模板引擎。如果您有刀片视图文件，她将在 javascript 之前执行。在您的情况下，当从服务器返回 html 时，NoImg 将具有由帮助器资产（）返回的扩展值。

这会很好：

<?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);

【讨论】：