無法在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

刀片在響應到達客戶端之前就會生成視圖，當客戶端正在執行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); 

這將產生從{{asset("")}}http://localhost:8000/，然後在瀏覽器中加載它會將您的JS變量追加到URL。