我另外開一個java script檔,以jquery動態加入image標籤,但是image無法讀到資源相對路徑,我在前端頁面,正常設置image 標籤可以找到資源相對路徑.....有哪位大大可以為我解惑一下?
以下是js code:
$(li21).click(function () {
$(header).after(
'<div id="card1" class="card rounded" style="width:132px;height:132px;margin-top:20px;margin-left:20px;background:white;border-radius:10px;padding:6px;">
<img class="card-img-top" src="~/image/DisplayCut (1).jpg" alt="Card image cap" style="width:110px;height:70px;border-radius:10px;">
<div class="card-body">
<p class="card-text" style="color:black;text-align:center;">XXXXX</p>
</div>
</div>');
});
CHROME CONSOLE 的提示: Failed to load resource: the server responded with a status of 404 ()
已邀請的邦友 {{ invite_list.length }}/5
jquery動態html不能使用~
舉例:
<img src="~/image/DisplayCut (1).jpg">
系統生成<img src="localhost/image/DisplayCut (1).jpg">
$(header).after('<img src="~/image/DisplayCut (1).jpg">');
系統生成<img src="localhost/~/image/DisplayCut (1).jpg">
所以才出現404錯誤
你可以使用@Url.Content("連結")方法獲取相對路徑
$(header).after(''<img src='@(Url.Content("/image/DisplayCut (1).jpg"))'>'');
JavaScript是前端,
Razor是後端,
你在Razor寫~他會幫你編譯轉換,
但是不能寫在JavaScript中,
這部分你要再去了解一下觀念,
在JavaScript中不能用
<img src="~/image/DisplayCut (1).jpg">
而要用
<img src="/image/DisplayCut (1).jpg">
這只是前端語言用法跟後端語言的用法搞混在一起來。
無論是php還是asp來說。像是<%%>跟~或是其它後端語言用法。並不會出現在瀏覽器。
也就是說，當你在asp的view中使用了
src="~/image/DisplayCut (1).jpg"
應用方式，針對~在其view來講會自動幫你轉譯成local。才輸出html碼給瀏覽器使用。
簡單來講，你永遠都不可能在其已輸出的html碼中。去看到<% %>跟~這一類的轉譯碼。
相對的，當你在使用前端語言如javascript或jquery之類的語言。
就不得套用到後端語言的解析應用碼。因為前端語言是針對已輸出的html碼做處理。並不會再透過asp等後端語言的view處理。自然不能理解~的用法。只會將其當成一個字串處理。
以上說明是否能明白?
iThome鐵人賽
看影片追技術