iT邦幫忙

0

asp.net mvc image src 無法讀到資源

我另外開一個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 ()

~前面加個@看看
<img src="@~/image/DisplayCut (1).jpg">
wolfsky95 iT邦新手 5 級 ‧ 2019-06-24 17:34:33 檢舉
感謝大大回復,我了解我的觀念盲點在哪了.......
1
暐翰
iT邦大師 1 級 ‧ 2019-06-24 03:45:48
最佳解答

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"))'>'');

Demo

連結: asp.net mvc razor ~ | .NET Fiddle
20190624103321.png

wolfsky95 iT邦新手 5 級 ‧ 2019-06-24 18:55:56 檢舉

照大大的方法,我有解決問題了,感謝大大的講解......

1
小魚
iT邦大師 1 級 ‧ 2019-06-24 07:54:03

JavaScript是前端,
Razor是後端,
你在Razor寫~他會幫你編譯轉換,
但是不能寫在JavaScript中,
這部分你要再去了解一下觀念,

在JavaScript中不能用

<img src="~/image/DisplayCut (1).jpg">

而要用

<img src="/image/DisplayCut (1).jpg">
wolfsky95 iT邦新手 5 級 ‧ 2019-06-24 17:36:35 檢舉

謝謝大大的觀念提醒,了解了

1
浩瀚星空
iT邦大師 1 級 ‧ 2019-06-24 13:41:53

這只是前端語言用法跟後端語言的用法搞混在一起來。

無論是php還是asp來說。像是<%%>跟~或是其它後端語言用法。並不會出現在瀏覽器。

也就是說,當你在asp的view中使用了

src="~/image/DisplayCut (1).jpg"

應用方式,針對~在其view來講會自動幫你轉譯成local。才輸出html碼給瀏覽器使用。

簡單來講,你永遠都不可能在其已輸出的html碼中。去看到<% %>跟~這一類的轉譯碼。

相對的,當你在使用前端語言如javascript或jquery之類的語言。
就不得套用到後端語言的解析應用碼。因為前端語言是針對已輸出的html碼做處理。並不會再透過asp等後端語言的view處理。自然不能理解~的用法。只會將其當成一個字串處理。

以上說明是否能明白?

wolfsky95 iT邦新手 5 級 ‧ 2019-06-24 17:37:35 檢舉

謝謝大大的觀念教導......了解盲點在哪了

我要發表回答

立即登入回答