как изменить изображение sr c в Alpine js как jquery? - PullRequest
Новая
       16

как изменить изображение sr c в Alpine js как jquery?

0 голосов
/ 29 марта 2020

есть div с тэгом, который, кликая на маленькое изображение, я изменяю атрибут sr c и показываю, что это оригинальный размер, но я не знаю, как это сделать в 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?!

Ответы [ 2 ]

0 голосов
/ 05 апреля 2020

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

Демонстрируется пером здесь с некоторыми фиктивными данными.

0 голосов
/ 31 марта 2020

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

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