在SweetAlert上更改图标图像大小

Question

我正在尝试在SweetAlert上更改图标图像大小。在.css文件中，我看到：

.sweet-alert .sa-icon {
    width: 80px;
    height: 80px;
    border: 4px solid gray;
    -webkit-border-radius: 40px;
    border-radius: 40px;
    border-radius: 50%;
    margin: 20px auto;
    padding: 0;
    position: relative;
    box-sizing: content-box; }

我改变了这个值：

 width: 80px;
 height: 80px;

但不要改变任何东西。我的.png文件以预定的大小显示。建议？

Answer 1

在控制器中使用“imageSize”对象类。

  swal({  title: "Oops...",
          text: "Please have a title and body in your post.",
          imageUrl: "../../../img/oopsface.png",
          imageSize: '600x600'
  });

（如果您想以这种方式修改甜蜜警报，则需要使用此格式来调用警报）

Answer 2

swal({
  title: "Oops...",
  text: "Please have a title and body in your post.",
  imageUrl: "../../../img/oopsface.png",
  //instead of imageSize use imageWidth and imageHeight
  imageWidth: 600,
  imageHeight: 600,
});

Answer 3

这对我来说可以。尝试删除.sa-icon。

.sweet-alert  {
    width: 80px;
    height: 80px;
    border: 4px solid gray;
    -webkit-border-radius: 40px;
    border-radius: 40px;
    border-radius: 50%;
    margin: 20px auto;
    padding: 0;
    position: relative;
    box-sizing: content-box; }

<img src="http://placehold.it/350x150" class="sweet-alert">

Answer 4

就我而言，我的img课程覆盖了imageWidth和imageHeight。为了解决这个问题，我必须在swal init上添加一个自定义类，如下所示：

swal({
    title: "Title",
    text: "Swal text",
    imageUrl: "/example/image.png",
    imageClass: "contact-form-image",
    confirmButtonText:"Ok",
});

并在style.css上定义一个类：

.contact-form-image {
    width: 144px;
    height: 144px;
}

Answer 5

'imageHeight'表示图像高度，'imageWidth'表示图像宽度

swal({        
    title: 'Alert!',        
    text: 'Content',        
    imageUrl: 'assets/images/user.png',        
    imageHeight: 80, 
    imageWidth: 80,       
    imageClass:'img-responsive rounded-circle',        
    animation: false        
});

1. 提醒标题的“标题”
2. 警报内容的“文字”
3. 'imageUrl'用于从网站嵌入图片网址
4. 'imageHeight'用于图像尺寸（高度）
5. 'imageWidth'用于图像大小（宽度）
6. 'imageClass'为您的自定义图像类/其他类添加

HTML输出就像

<img src="assets/images/user.png" class="img-responsive rounded-circle" height="80" width="80" >

Answer 6

我发现这可以解决我的问题

swal({
  title: "Oops...",
  text: "Please have a title and body in your post.",
  imageUrl: "../../../img/oopsface.png",
  //instead of imageSize use imageWidth and imageHeight
  imageWidth: 600,
  imageHeight: 600,
});