javascript - 灯廊图片下载问题

Question

当我使用 lightgallery 打开图像并尝试下载它时。它适用于本地服务器，但是当我尝试在生产中做同样的事情时。图像在新选项卡中打开。

• 使用 https 保护产品服务器
• 图片 url 来自亚马逊 s3 服务器

HTML：

<div class="col-lg-offset-3 col-lg-9 col-md-offset-2 col-md-10 col-sm-10" style="padding-left:10px">
  <div id="customPreviews" style="border: 1px dashed rgba(0, 0, 0, 0.3);padding: 40px 40px;">
    <ul id="lightgallery" class="list-unstyled row"></ul>
  </div>
</div>

Javascript：

var lg = $('#lightgallery').lightGallery({
  iframeMaxWidth: '80%'
});

function reinitGallery() {
  lg.data('lightGallery').destroy(true);
  lg = $('#lightgallery').lightGallery({
    iframeMaxWidth: '80%'
  });
}

function renderAllImage() {
  $('#lightgallery').html("");
  setTimeout(function() {
    reinitGallery();
  }, 500);
  for (i = 0; i < fileArr.length; i++) {
    addFileToPreviewContainer(fileArr[i]);
  }
}

function addFileToPreviewContainer(data, reInit, append) {
  if (isThumb == true) {
    var newTemplate = templateText + '</ul></div></li>';
  } else {
    var newTemplate = templateListText;
  }
  var templateObj = $($.parseHTML(newTemplate));
  if (data.file_type == 'jpg' || data.file_type == 'JPG' || data.file_type == 'jpeg' || data.file_type == 'JPEG' || data.file_type == 'png' || data.file_type == 'PNG' || data.file_type == 'gif' || data.file_type == 'GIF')
    templateObj.attr('data-iframe', false);

  var date;
  if (data.created_at.date) {
    date = data.created_at.date;
  } else {
    date = data.created_at;
  }
  templateObj.attr('data-src', data.data_src);
  templateObj.attr('data-sub-html', '<h4>' + data.original_filename + '</h4>');
  templateObj.find('.a-thumb').attr('src', data.path_thumbnail);
  templateObj.find('.a-thumb').attr('alt', (data.file_name) ? data.file_name : data.filename);
  templateObj.find('.a-link-filename').text(data.original_filename);
  templateObj.find('.a-info').text(date + " - " + data.size + ' kb');
  templateObj.find('.a-id').val(data.original_filename);
  if (append == false) {
    $('#lightgallery').html('');
    $('#lightgallery').append(templateObj);
  } else {
    $('#lightgallery').append(templateObj);
  }


  if (reInit) {
    setTimeout(function() {
      reinitGallery();
    }, 500);
  }
}

这是截图以便更好地理解

Answer 1

您需要在将图像上传到 s3 服务器时添加元数据

添加此元数据

['ContentDisposition' => 'attachment']