javascript - Laravel - Javascript 在路径更改时找不到图像

Question

在我的 Laravel 模板中，我包含了一个 JS 文件。

这里我使用了一个需要图片的插件。

    $.backstretch([
        "../img/header-tt-big.jpg",
        "../img/header-soccer-big.jpg"
    ]

所以..当我像这样进入我的“起始页”时，它正在工作: http://localhost/project/public/de/p1

当我去这里时它不会工作 http://localhost/project/public/de/p1/register

我必须为 JS 文件中的所有图像添加另一个“../”。我怎样才能在不每次都手动更改数组的情况下完成这项工作？

谢谢你:)

Answer 1

正如@ITroubs 所指出的，如果您在 Blade 模板(<script> 标签)中有 javascript 代码，您可以而且应该使用 asset()生成 URL。但不要忘记额外的引号，以便 javascript 将其解释为字符串。

$.backstretch([
    "{{ asset('img/header-tt-big.jpg') }}",
    "{{ asset('img/header-soccer-big.jpg') }}"
]

但是，如果您将 javascript 代码放在单独的 .js 文件中(实际上是推荐的)，您就不能这样做。相反，我建议您定义一个 assetBaseUrl在您的布局 Blade 模板之前需要它的 javascript 代码:

<script>
    var assetBaseUrl = "{{ asset('') }}";
</script>

用法:

$.backstretch([
    assetBaseUrl + "img/header-tt-big.jpg",
    assetBaseUrl + "img/header-soccer-big.jpg"
]