作为数据属性传递给 JS

问题描述

我正在尝试通过 HTML 中的数据属性传递图像源（数据徽标）以及包含图像的文件夹（数据文件夹）以在 Javascript 中检索。图像加载正确，但在检索文件夹时，我遇到了“加载资源失败：服务器响应状态为 404（未找到）”错误。为什么会出现这种情况，我该如何解决？

我的 HTML 代码：

<button type="button" class="col-md-12 modal-button" data-toggle="modal"
   data-target="#exampleModal" data-name="&ltinterstell/Her&gt" 
   data-subtitle="2021 Hackathon" data-logo="/img/logos/interstellher-logo.jpg"
   data-folder="/img/interstellHer">
   ...
</button>

JS：

  $('#exampleModal').on('show.bs.modal',function (event) {
    var button = $(event.relatedTarget) // Button that triggered the modal
    var recipient = button.data('name')
    var sub_title = button.data('subtitle')
    var logo = button.data('logo')
    var folder = button.data('folder')
    //get other values using .find..
    var description = button.find('.event-info').text()
    var date = button.find('.events-date p').text()
    var place = button.find('.events-place p').text()
    console.log(logo)
    console.log(folder)
    var modal = $(this)
    modal.find('.modal-img').attr("src",logo)
    modal.find('.modal-title').text(recipient)
    modal.find('.modal-subtitle').text(sub_title)
    modal.find('.modal-blurb').text(description)
    modal.find('.modal-events-date p').text(date)
    modal.find('.modal-events-place p').text(place)

    var pictures = [];

    $.ajax({
      url: folder,success: function (data) {
        $(data).find("a").attr("href",function (i,val) {
          if (val.match(/\.(jpe?g|png|gif)$/)) {
            pictures.append("<img src='" + folder + val + "'>");
          }
        });
      }
    });
  })

img 目录是这样的：

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）