光库图像下载问题

Question

当我使用lightgallery打开图像时，我尝试下载它。它适用于本地服务器，但是当我尝试在生产中执行相同操作时。图像会在新标签页中打开。

• 使用https保护Product Server
• 图片网址来自亚马逊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']