帶有Url.Content助手的Razor在URL中的空格處結束引號

Question

我將ASP.NET Core 2與Razor結合使用，以嘗試通過ViewModel將圖像URL傳遞到View中。 不幸的是，圖像URL中有空格，目前我無法控制。

我有一個這樣的文件名（注意空格）：

https://example.com/images/file name.jpg

我正在使用Razor嘗試顯示如下圖像：

<img src=@item.ImageUrl />

輸出的HTML看起來像這樣：

<img src="https://example.com/images/file" name.jpg />

顯然這不會做！ 我應該提到，當我們使用文件名中沒有空格的圖像時，這一切都知道。 這是我嘗試解決此問題的一些方法：

在Razor中使用Url.Content幫助程序（這沒​​有什么不同）：

<img src=@Url.Content(item.ImageUrl) />

在填充ViewModel時使用System.Web.HttpUtility.UrlEncode （這會導致“雙重編碼”錯誤）：

myViewModel.ImageUrl = HttpUtility.UrlEncode(someUrl);

我的目標是使URL正確編碼（在輸入字符串的空格中沒有“ double-encoding”並且不被截斷）。 我怎樣才能實現這個目標？

Answer 1

問題是Razor會嘗試創建有效的HTML，因此當看到空格時，它將自動關閉引號，因此：

@{string img = "a a.jpg";}
<img src=@img />

獲取呈現為

<img src="a "a.jpg /> // of course invalid

因此，您需要確保添加引號，然后Razor會使用它們：

<img src="@img" />

哪個被渲染為

<img src="a a.jpg" />

Answer 2

你可以試試

<img src="@Html.Raw(item.ImageUrl)" />

但我同意，從長遠來看，使用無效的URL（帶空格）似乎不太有用。