时间戳

首页 > 解决方案 > 是否可以从 for 循环中使用 Alpine.js 在 img 中的 src 中注入变量？

html - 是否可以从 for 循环中使用 Alpine.js 在 img 中的 src 中注入变量？

问题描述

我正在使用 Alpine.js 运行 for 循环。我正在使用 Nunjucks 模板引擎。

我有一个包含三个项目的数组，称为项目

是否可以在 img 标签的 src 属性中注入 item 变量？请参阅下面的代码。

<div x-data="{items: ['first-image.png','second-image.png','third-image.png'], active: 0}">
<div class="snap overflow-auto relative flex-no-wrap flex transition-all" x-ref="slider"
    x-on:scroll.debounce="active = Math.round($event.target.scrollLeft / ($event.target.scrollWidth / items.length))">
    <template x-for="(item,index) in items" :key="index">
        <div class="w-full flex-shrink-0 flex items-center justify-center">
            <img src="`../assets/images/favicon/${item}`" alt="" style="height:550px">
        </div>
    </template>
</div>

标签： htmlnunjucksalpine.js

解决方案

绝对有可能，您正在寻找的是x-bind指令。

您可以src使用x-bind:src="someValue"或:src=""简写将 Alpine.js 组件状态中的值“绑定”到属性

所以你可以这样做：

<img x-bind:src="`../assets/images/favicon/${item}`" alt="" style="height:550px">

推荐阅读