как изменить src изображения в Alpine js, например jquery?

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

Что-то вроде этого (с использованием синтаксиса 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>

Продемонстрировано ручкой здесь с некоторыми фиктивными данными.

Answer 2

Проверьте этот код: демонстрация предварительного просмотра изображения. Надеюсь это поможет.

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

Answer 3

вы можете для каждого из них, как это

Answer 4

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

Answer 5

вы можете для каждого из них вот так

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

Answer 6

Вы можете использовать x-refна вашем основном изображении, а затем $refв вашей функции данных Alpine, чтобы установить srcсвойство вашего основного изображения. Вы можете определить свое основное изображение примерно так:

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

Для каждого из ваших эскизов вы можете сделать что-то вроде:

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

Затем ваша функция данных может включать что-то вроде этого:

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

Я загрузил рабочий пример здесь:https://tailwindcomponents.com/component/tailwind-css-with-alpine-js-photo-gallery .

Обратите внимание, что это специально разработано, чтобы вы могли иметь разные URL-адреса от миниатюр и основных изображений, поэтому миниатюры могут быть меньше по размеру и загружаться очень быстро. Если вы используете одни и те же изображения для обоих, вы можете значительно упростить код. Каждую из ваших миниатюр можно сделать так:

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

Без необходимости в pickPhotoфункция или photosмножество.

Недостатком более простого подхода является то, что ваша страница будет загружаться дольше, потому что вы не будете использовать изображения меньшего размера для миниатюр.