无法在img src中设置Js变量

Question

我正在尝试设置在特定div中使用javascript创建的一些html内容。

我正在尝试下面的代码 -

var imgPath = data.destPath+data.fileName;
console.log(imgPath);    //  assets/users/Digvj_2_1480977246_tmp.png

var str = '<img src="{{asset('+imgPath+')}}" width="500" id="image_cropbox"><br><span style="font-style: italic; font-size: 13px"><small>Select The Required Area To Crop Image.</small></span>';
console.log(str);      // src= "http://localhost:8000/+imgPath+"

$('#user_profile_img').html(str);

在我尝试的第二个日志中，它直接打印变量名而不是值。

无法识别我在这里缺少的东西。

Answer 1

Blade会在响应到达客户端之前生成视图，这是javascript执行的时间。您尝试使用您在javascript中定义的变量作为刀片变量。像这样更新：

var imgPath = data.destPath+data.fileName;
console.log(imgPath);    //  assets/users/Digvj_2_1480977246_tmp.png

var str = '<img src="{{asset("")}}'+imgPath+'" width="500" id="image_cropbox"><br><span style="font-style: italic; font-size: 13px"><small>Select The Required Area To Crop Image.</small></span>';
console.log(str);      // src= "http://localhost:8000/+imgPath+"

$('#user_profile_img').html(str);

这将从http://localhost:8000/生成{{asset("")}}，然后当浏览器加载时，它会将您的js变量附加到网址。