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

【问题标题】：how to change the image src in Alpine js like jquery?如何像 jquery 一样更改 Alpine js 中的图像 src？
【发布时间】：2020-07-09 21:01:51
【问题描述】：

有一个带有标签的 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 中怎么做？！

【问题讨论】：

标签： alpine.js

【解决方案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>

【讨论】：

谢谢你的回答，但我不是我所要求的。简单想象一下，你有一个页面，左列是主图像，右列是许多小图像，通过单击它们，左列中的主图像会更新并以更大的尺寸显示该图像。
请参阅scrimba.com/p/pdqbBcM/cJpnNpUB 上有关 Alpinejs 的本教程。我想这就是你要找的东西！
不，它使用许多图像作为隐藏，通过单击使其可见，我需要像 jquery 那样更改为图像的 src

【解决方案2】：

类似这样的东西（使用 Laravel Blade 语法）？

    <div x-data="{imageUrl: ''}">
      <section>
        <img id="main" :src="imageUrl" />
      </section>

      <hr />

      <div>
        @foreach($images as $image)
            <img id='small' src="{{ images/.$image }}" @click="imageUrl = '{{ images/.$image }}'" />
        @endforeach
      </div>
    </div>

用笔 here 用一些虚拟数据演示。

【讨论】：

【解决方案3】：

在 Alpinejs 中你可以做这样的事情。未经测试，仅供参考。

myimages() {
   return {
        selected: '',
        images: [
            'images/1.png',
            'images/2.png',
            'images/3.png',
            'images/4.png'
        ]
   } 
}


<div x-data="myimages()">

    <div>
        <img id="main" :src="selected" />
    </div>

    <div>
        <template x-for="(selimage, index) in images" :key="index">
            <img class='small' :src="selimage" @click="selected = selimage" />
        </template>
    </div>

</div>

【讨论】：

【解决方案4】：

你可以像这样对他们两个都这样做

<div  x-data="{image:'0'}"  > 
   

  
      <div>
      @foreach ($image_src as $key =>  $image)
        <a href="">
        <img  x-show="image==='{{ $key++ }}'"  
        src="{{$image}}" alt="">

@endforeach

    </div>
    <div class=" overflow-x-scroll ">

      
        @foreach ($image_src as $key=> $image)
          
        
    <a class="mr-1" on- href="">
<img :class="{' border border-way-pink':image==='{{ $key }}'}"
        @click.prevent="image='{{ $key++ }}'" 

        class="w-32 h-24 mr-5" src="{{$image}}" alt=""></a>@endforeach
       
        
    </div>
   
</div>

【讨论】：