'how to change the image src in Alpine js like jquery?

there is a div with tag that by click on small image I change the src attribute and show it's the original size, but I don't know how to do in Alpine js?

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

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

in jquery :

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

but I don't know how to do in Alpine js?!

alpine.js


Solution 1:[1]

Something like this (using Laravel Blade syntax)?

    <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>

Demonstrated in a pen here with some dummy data.

Solution 2:[2]

Check this codepen: Image Preview Demo. Hope this helps.

<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>

Solution 3:[3]

You can use x-ref on your main image and then $ref in your Alpine data function to set the src property of your main image. You could define your main image something like:

<img x-ref="mainImage" src="URL TO YOUR FIRST IMAGE" />

For each of your thumbnail images, you can do something like:

<img src="URL TO THUMBNAIL" x-on:click="pickPhoto(ARRAY INDEX)">

Your data function can then include something like this:

...
currentPhoto: 0,
photos: [
    "URL TO FIRST IMAGE",
    ...,
    "URL TO LAST IMAGE",
],
pickPhoto(index) {
    this.currentPhoto = index;
    this.$refs.mainImage.src = this.photos[this.currentPhoto];
},
...

I have uploaded a working example here: https://tailwindcomponents.com/component/tailwind-css-with-alpine-js-photo-gallery

Note that this is deliberately designed to allow you to have different URLs from your thumbnails and main images, so the thumbnails can be intrinsically smaller, and load very quickly. If you are using the same images for both, you can simplify the code significantly. Each of your thumbnails could be done like this:

<img src="URL TO YOUR FIRST IMAGE" x-on:click="$refs.mainImage.src = 'URL TO YOUR FIRST IMAGE'">

With no need for the pickPhoto function or the photos array.

The downside of the simpler approach is that your page will take longer to load because you won't be using smaller images for your thumbnails.

Solution 4:[4]

you can for each both of them like this

<div x-data="{image:'0'}">
    <div>
        @foreach ($image_src as $key =>  $image)
            <a href="">
                <img x-show="image==='{{ $key++ }}'"
                     src="{{$image}}" alt="">
            </a>
        @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>

Solution 5:[5]

In AlpineJs you could do something like this. Not tested, just to make you an idea.

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kurucu
Solution 2 Mithicher
Solution 3 GeeC
Solution 4 Mo Kawsara
Solution 5 Mo Kawsara

Related Questions