將JQuery屬性設置為img src標簽中的Image文件夾路徑

Question

問題背景：

我正在嘗試將JQuery函數的兩個屬性設置為img src ，其圖像存儲在我的MVC站點的Images文件夾中。

問題：

以下代碼顯示了我的站點的Images文件夾nextText和prevText屬性設置為左右.jpg的情況：

    $(document).ready(function () {
    $('.bxslider').bxSlider({
        nextSelector: '#slider-next',
        prevSelector: '#slider-prev',
        controls: true,
        pager: false,
        nextText: '<img src="~/Images/rightArrow.jpg" height="25" width="25"/>',
        prevText: '<img src="~/Images/leftArrow.jpg" height="25" width="25"/>'
    });

目前，以上內容在我的頁面上產生了損壞的圖像 。 我可以使用~來獲取img src標簽上的相對路徑嗎？ 如果我在img src提供了來自Google的外部圖片網址，則該網址有效。

我如何正確設置nextText和prevText屬性，以便它們在我網站的Images文件夾中使用Image？

Answer 1

只需在布局頁面的script標簽中創建baseUrl。

<script type="text/javascript">
 var baseUrl = "@Url.Content("~")";
</script>

並在您的腳本中使用它，如下所示：

 $(document).ready(function () {
    $('.bxslider').bxSlider({
        nextSelector: '#slider-next',
        prevSelector: '#slider-prev',
        controls: true,
        pager: false,
        nextText: '<img src="'+baseUrl +'Images/rightArrow.jpg" height="25" width="25"/>',
        prevText: '<img src="'+baseUrl +'Images/leftArrow.jpg" height="25" width="25"/>'
    });

即使部署后也可以使用。 我遇到了同樣的問題，我用這種方式解決了這個問題。