Javascript 当新图像加载到啤酒展示中时，Beerslider.js将停止正常工作 我用于显示对象的前后图像。

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

我可以使用类“beer slider”多次更改div中的img src，而不会出现问题。也是该图像定义了预览的高度。但是，当我用类“beer-reveal”更改div中的img src时，问题就暴露了出来

上图帽子的自然尺寸为708*796，显示为340*382。另一张是607*607

在下面的代码中，首先检查它们是否存在图像URL。如果不存在img元素，则啤酒幻灯片div和啤酒展示div中将不存在img元素。在其中一个为null，另一个不同于null的情况下，永远不会存在img URL。当用户上传新的/其他图像时，该图像被发送到服务器进行一些操作，然后以base64图像格式返回并注入新的img src

简言之，我做了以下工作：

//jquery元素上的Hook beerslider：
$.fn.BeerSlider=函数（选项）{
选项=选项| |{}；
返回此值。每个（函数（）{
新的啤酒滑翔机（此，选项）；
});
};
//我仅显示第一个图像的预览贴图。第二幅图像的情况相同，但imageReload将“.beer slider”和“not.beer reveal”作为参数：
//选择新图片时：
$（“#文件1”）。关于（“更改”，函数（e）{
var formData=new formData（）；
var file=this.files[0]；
formData.append（“文件”，file）；
图像重新加载（“https://i.ibb.co/7jxDhcc/nikecom-homepage.jpg“，”啤酒展示“）；
//AJAX调用服务器来处理它
/*$.ajax({
url:“/Picture/SomeOperation”，
数据：formData，
类型：“POST”，
processData:false，
contentType:false，
成功：功能（数据）{
//数据/图像以base64格式返回：（数据：image/{mimetype}；base64，/9j…Aduuawc8Y6j…）。
图像重新加载（数据，“.beer-discover”）；
}*/
});
$（“#文件2”）。关于（“更改”，函数（e）{
图像重新加载（“https://i.ibb.co/YtP8r8j/17mai.jpg“，”啤酒滑块“）；
});
函数imageReload（数据，选择或之前）
{
//如果父div包含img元素，请将其删除：
if（$（selectorBefore）.find（“>img”）.length）
{
$（在前面选择）。查找（“>img”）.remove（）；
}
//添加img src为base64的新img元素：
var img=document.createElement（“img”）；
img.src=数据；
img.setAttribute（“类”、“图像体”）；
$（在前面选择）。前置（img）；
$（“.beer slider”）.BeerSlider（{start:50}）；
}
$（文档）.ready（函数（）{
$（“.beer slider”）.BeerSlider（{start:50}）；
})；

.image框{
宽度：100%；
}
#影像体{
宽度：100%；
高度：自动；
}

---

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

函数图像重新加载（数据，选择或之前）
{
//删除旧图像
if（$（selectorBefore）.find（“>img”）.length）
{
$（在前面选择）。查找（“>img”）.remove（）；
}
//使用新的src和类生成新图像
var img=document.createElement（“img”）；
img.src=数据；
img.setAttribute（“类”、“图像体”）；
//更换孔beerslider div
//这是之前的图像吗？
var førBilde=选择或在本地比较（“啤酒展示”）之前；
如果（førBilde==0）//是
{
var srcEtterBilde=$（“.beer slider>img”）.attr（“src”）；
img.setAttribute（“id”，“forhåndsvisning-bilde-før”）；
$（“.beer滑块”）.remove（）；
var html=''+
''+
'' +
'' +
'';
$（“.image box”）.append（html）；
$（“.beer-leaver”）.prepend（img）；
$（“.beer slider”）.BeerSlider（{start:50}）；
}
其他//否
{
var srcFørBilde=$（“.beer-reveal>img”）.attr（“src”）；
img.setAttribute（“id”、“forhåndsvisning bilde etter”）；
$（“.beer滑块”）.remove（）；
var html=''+
'' +
''+
'' +
'';
$（“.image box”）.append（html）；
$（“.beer slider”）.prepend（img）；
$（“.beer slider”）.BeerSlider（{start:50}）；
}
}

你能放静态html吗？因为你把你的代码放在了.net razor中。所以在代码片段中我们得到了if条件和所有条件。现在更好了@Revti Shah？按run:a/“run code snippet”在这里工作。奇怪@Codebeat@MrB给我一些时间。我将与更新共享您的代码。