如何在我的模式中显示我点击的图像？

Question

我是 JS 的新手，我是通过 Stimulus 学习它的，我使用的是 Rails。我一直在尝试在我的模式中显示我从我的图库中单击的图像，但它总是显示我的图库的第一张图像。我不知道如何定位我的 img 的 src。这是我的索引页。

<div class="container mb-5">
  <h1 class='headers'>This is my personal art page</h1>
  <div class='image_container' id='app' data-controller="clickable_images">
    <% @personals.each do |personal| %>
      <div class='img-box'>
        <button data-action="click->clickable_images#expandImage"><%= cl_image_tag personal.image.key, class: 'personal_img', data: { target: "image" } %></button>
      </div>

      <div class="modal" data-controller="slider" data-clickable_images-target="modal">
        <div class="modal-dialog">
          <div class="modal-content">
            <%= cl_image_tag personal.image.key %>
            <button data-action="click->slider#close">Close</button>
          </div>
        </div>
      </div>
    <% end %>
  </div>
</div>`

这是我的两个刺激控制器。模式打开和关闭我似乎无法瞄准正确的东西。当我打开我的控制台并按下图像时，它起作用了，它显示我点击了不同的图像，但是我如何定位动态源以便能够在我的模态中显示点击的图像？

import { Controller } from "stimulus";

export default class extends Controller {

  open() {
    document.body.classList.add("modal-open");
    this.element.setAttribute("style", "display: block;");
    this.element.classList.add("show");
    document.body.innerHTML += '<div class="modal-backdrop fade show"></div>';
  }

  close() {
    document.body.classList.remove("modal-open");
    this.element.removeAttribute("style");
    this.element.classList.remove("show");
    document.getElementsByClassName("modal-backdrop")[0].remove();
  }
}

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["modal"];

  expandImage(event) {
    let sliderController = this.application.getControllerForElementAndIdentifier(
      this.modalTarget,
      "slider"
    );

    sliderController.open();

    console.log(event.currentTarget);
  }
}