Alpine3 js & Larvavel

Question

我遇到了一些问题，想让下面的代码正常工作。我肯定我已经看不清什么简单的东西了，但却找不到

我的代码正在弹出错误:阿尔卑斯表达式错误:意外令牌:字符串文本

<div 
    x-data="{ images: ['background-1.jpg', 'background-2.jpg'], index: 0}"
    x-init="index = Math.floor(Math.random() * images.length)">

    <div :style="'background-image: url(/img/' + $images[index]')'"></div>

Answer 1

您正在尝试使用混合的PHP语法。JS不需要变量的美元符号前缀(只有在您最初添加它们的情况下)。

修正的语法(在图像URL周围加上额外的单引号)：

<div :style="'background-image: url(\'/img/' + images[index] + '\')'"></div>

或者我们也可以在backtics (`)中使用JS模板文字，后者更容易读懂：

<div :style="`background-image: url('/img/${images[index]}')`"></div>