当新图像加载到 beer-reveal 时，Beerslider.js 停止正常工作

Posted 2023-05-08

【中文标题】当新图像加载到 beer-reveal 时，Beerslider.js 停止正常工作

【英文标题】：Beerslider.js stop working properly when new image is loaded into beer-reveal

【发布时间】：2020-04-06 11:38:31

【问题描述】：

我使用beerslider.js 显示对象的前后图像。

我想要的是让用户在保存之前可以预览他们上传的图像。如果他们对结果不满意，他们可以通过上传新/其他图像来更改预览中的图像。但是，当他们使用 beer-reveal 类将新/其他图像上传到 div 元素内的 img-element 时，初始高度与使用 beer-slider 类的 div 中的 img 高度不同，并且当句柄是滑动不仅改变了宽度，还改变了高度。查看图片：

First time works fine:

But from second upload all go wrong

我可以在没有问题的情况下多次更改 div 中的 img src 类“beer-slider”。也正是这个图像定义了预览的高度。但是，当我使用类“beer-reveal”更改 div 中的 img src 时，问题就会显现出来。

上面的帽子图片自然大小为708*796，显示为340*382。另一张图片是607*607。

在下面的代码中，首先检查它们是否存在图像 url。如果它们不存在，那么在 beer-slide div 和 beer-reveal div 中将不存在任何 img 元素。永远不会存在一个为 null 而另一个不为 null 的 img-url。 当用户上传新/其他图像时，这些图像会被发送到服务器进行某些操作，然后再以 base64 图像格式返回并注入新的img src。

简而言之，我执行以下操作：

// Hook beerslider on jquery-elements:
$.fn.BeerSlider = function ( options ) 
  options = options || ;
  return this.each(function() 
      new BeerSlider(this, options);
  );
;


// I only show the preview-mapping for the first image. It is the same for the second image, except imageReload takes in ".beer-slider" and not ".beer-reveal" as argument:

// When new picture is selected:
$("#file1").on("change", function(e)
  var formData = new FormData();
  var file = this.files[0];
  formData.append("file", file);
  imageReload("https://i.ibb.co/7jxDhcc/nikecom-homepage.jpg",".beer-reveal");
  // AJAX call to server to do something with it
  /*$.ajax(
    url:"/Picture/SomeOperation",
    data: formData,
    type: "POST",
    processData: false,
    contentType: false, 
    success: function(data)
        // data/image is returned in base64 format: (data:image/mimetype;base64,/9j…Aduuawc8Y6j.....).
        imageReload(data, ".beer-reveal");
  */
 );
$("#file2").on("change", function(e)
  imageReload("https://i.ibb.co/YtP8r8j/17mai.jpg",".beer-slider");
 );


function imageReload(data, selectorBefore) 

// If parent div contains img-elemnt, remove it:
if($(selectorBefore).find("> img").length)

  $(selectorBefore).find("> img").remove();

// Add new img-elemnt with img-src as base64:
var img = document.createElement("img");
img.src = data;
img.setAttribute("class", "imageBody");
$(selectorBefore).prepend(img); 
$(".beer-slider").BeerSlider(start: 50);


$(document).ready(function()
  $(".beer-slider").BeerSlider(start: 50);
);

.image-box 
    width: 100%;


#imagebody 
    width: 100%;
    height: auto;

<link href="https://unpkg.com/beerslider/dist/BeerSlider.css" rel="stylesheet"/>

<!-- Input-elements -->
<!-- Picture before (image that is mapped to div with class "beer-slider") -->
<input id="file2" name="file2" type="file">

<!-- Picture after (image that is mapped to div with class "beer-reveal") -->
<input id="file1" name="file1" type="file">

<!-- Beerslider/preview -->
<div class="image-box">
  <div class="beer-slider" data-beer-label="After">
    <img id="img-slider" class="imagebody"  src="https://i.ibb.co/LnbTfvp/Mr-Bean.jpg">
    <div class="beer-reveal" data-beer-label="Before">
      <img id="img-reveal" class="imagebody" src="https://i.ibb.co/YcD9zqf/1565567946098.jpg">
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/beerslider/dist/BeerSlider.js"></script>

你可以试试！您在本地计算机上选择什么图像并不重要。当您更改左侧输入时，一切都很好，但是当您更改右侧输入时，错误就是事实。

我被困住了，帮助会很可爱。

【问题讨论】：

可以放静态html吗？因为您将代码放在 .net razor 中。所以在 sn-p 中，我们得到了 if 条件和所有条件。

现在更好@Revti-Shah？

按运行：a/cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/… undefined "message": "ReferenceError: BeerSlider is not defined", "filename": "stacksnippets.net/js", "lineno": 43，“科尔诺”：7

“运行代码 sn-p”在这里工作。奇怪的。 @Codebeat

@MrB 给我一些时间。我将与更新分享您的代码。

【参考方案1】：

我通过重写 imageReload 函数解决了这个问题：

function imageReload(data, selectorBefore) 

   // Remove old image
   if($(selectorBefore).find("> img").length)
   
      $(selectorBefore).find("> img").remove();
   
   // Make new image with new src and class
   var img = document.createElement("img");
   img.src = data;
   img.setAttribute("class", "imageBody");

   // Replace the hole beerslider div
   // Is it the before-image?
   var førBilde = selectorBefore.localeCompare(".beer-reveal");
   if(førBilde == 0) // yes
   
      var srcEtterBilde = $(".beer-slider > img").attr("src");
      img.setAttribute("id", "forhåndsvisning-bilde-før");
      $(".beer-slider").remove();
      var html = '<div class="beer-slider" data-beer-label="Etter">' +
                    '<img class="imagebody" id="forhåndsvisning-bilde-etter"   src="' +srcEtterBilde +'">'+
                       '<div class="beer-reveal" data-beer-label="Før">' +
                       '</div>' +
                 '</div>';
      $(".image-box").append(html);
      $(".beer-reveal").prepend(img);
      $(".beer-slider").BeerSlider(start: 50);
   
   else // no
   
      var srcFørBilde = $(".beer-reveal > img").attr("src");
      img.setAttribute("id", "forhåndsvisning-bilde-etter");
      $(".beer-slider").remove();
      var html = '<div class="beer-slider" data-beer-label="Etter">' +        
                    '<div class="beer-reveal" data-beer-label="Før">' +
                       '<img class="imagebody" id="forhåndsvisning-bilde-etter" src="' +srcFørBilde +'">'+
                    '</div>' +
                 '</div>';
      $(".image-box").append(html);
      $(".beer-slider").prepend(img);
      $(".beer-slider").BeerSlider(start: 50);