javascript - 交响乐 2 :image paths in javascript file with assetic

Question

我正在尝试使用如下 Assets 从我的 symfony2 项目中的 js 文件创建图像路径:

   var arr = $('<img src="{{ asset("assets/images/linkArrow.png")}}">').css({
    position: 'absolute',
    ...
    });

但是我有以下错误

    "NetworkError: 404 Not Found - mywebsite.com/bundles/web/app_dev.php/project/1/assets
   /images/linkArrow.png"

我的图片在 web/assets 文件下。

Answer 1

您不能在 JavaScript 文件中使用 twig 语法。如果您可以将脚本放入模板文件中，那么它就可以工作了。另一种干净的方法是为您的 javascript 定义一个 Assets 基本路径变量。例如，要解决您的问题，您可以在布局模板中添加以下代码:

<script>
    var assetsBaseDir = "{{ asset('assets/') }}"
</script>

注意:如果您直接在 js 文件中引用变量，请确保在加载 javascript 文件之前定义此脚本

然后你可以在你所有的 JavaScript 文件中使用它，比如:

var arr = $('<img src="' + assetsBaseDir + 'images/linkArrow.png'+ '">').css({
    position: 'absolute',
    ...
});

编码愉快!