javascript - 将 JQuery 属性设置为 img src 标记中的图像文件夹路径

Question

问题背景:

我正在尝试将 JQuery 函数的两个属性设置为 img src，其图像存储在我的 MVC 站点的 Images 文件夹中。

问题:

以下代码显示属性 nextText 和 prevText 被设置为我的 Images 文件夹中的左右 .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 文件夹中的图像？

Answer 1

只需在布局页面的脚本标记中创建一个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"/>'
    });

即使在部署后，这也将起作用。我也遇到了同样的问题，我用这个方法解决了这个问题。