如何像jquery一样更改Alpine js中的图像src？

Question

有一个带有标签的div，通过单击小图像，我更改了src属性并显示它的原始大小，但是我不知道如何在Alpine js中使用它？

<div>
<img id="main" />
</div>

/* small images from db */
<div>
foreach($images as $image){
<img id='small' src="images/.$image" />
}
</div>

在jquery中：

$("#small").each(function(){
$(this).click(function(){
$("#main").attr('src', $(this).attr('src');)
})
})
})

但是我不知道如何在Alpine js中做？！

Answer 1

检查此密码笔：Image Preview Demo。希望这会有所帮助。

<div class="flex items-center justify-center text-gray-500 bg-blue-800 h-screen">
  <div class="w-full">
    <h3 class="mb-8 text-xl text-center text-white">Image Preview Demo</h3>
    <div class="w-full max-w-2xl p-8 mx-auto bg-white rounded-lg">
      <div class="" x-data="imageData()">
        <div x-show="previewUrl == ''">
          <p class="text-center uppercase text-bold">
            <label for="thumbnail" class="cursor-pointer">
              Upload a file
            </label>
            <input type="file" name="thumbnail" id="thumbnail" class="hidden" @change="updatePreview()">
          </p>
        </div>
        <div x-show="previewUrl !== ''">
          <img :src="previewUrl" alt="" class="rounded">
          <div class="">
            <button type="button" class="" @click="clearPreview()">change</button>
          </div>
        </div>
      </div>
    </div>
    <div class="mt-2 text-center text-white">
      <a class="w-32 mx-2" href="https://tailwindcss.com/">TailwindCSS</a>
      <a class="w-32 mx-2" href="https://github.com/alpinejs/alpine">AlpineJS</a>
    </div>
  </div>
</div>