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 文件以预定大小显示。有什么建议吗？

- user5200216

Answer 1

对于图片的高度，请使用'imageHeight'，对于图片的宽度，请使用'imageWidth'。

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

1. 'title' 代表弹窗标题
2. 'text' 代表弹窗内容
3. 'imageUrl' 代表来自网站的嵌入图片url
4. 'imageHeight' 代表图片高度
5. 'imageWidth' 代表图片宽度
6. 'imageClass' 代表你自定义的图片类/其他添加的类

HTML输出格式如下

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

- yekyawaung

Answer 2

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

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

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

- Jameela Huq

Answer 3

对于当前版本，之前提到的按钮和图片已不再适用。

尝一下这个。

swal({
      title: "Search...",
      text: "please, wait",
      icon: "../../images/gif/blue.gif",
      buttons: false,
      closeOnClickOutside: false
    });

和这个

.swal-icon img{
  width: 120px;
  height: 120px;
}

- steam

Answer 4

在我的情况下，我的类正在覆盖imageWidth和imageHeight。为了解决这个问题，我不得不在sweet 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;
}

- Cristián

Answer 5

对我来说它运行良好。尝试移除 .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">

- Kadeem L

---

我使用imageUrl:'.png'将我的图片添加到SweetAlert中。我只需要删除.sa-icon吗？但问题是大小。 - user5200216

你不能只是改变图片的src吗？ - Kadeem L

删除sa-icon并添加img src，警告未显示。 - user5200216

我已经删除了sa-icon并用原始的CSS进行了替换。添加<img src="dist/image.png" class="sweet-alert">但是警报没有打开。 - user5200216

关于我的问题有什么新消息吗？请告诉我，谢谢Kadeem。 - user5200216

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,
});

- Wilfried BEKALE

---

生成预览时出错，无法工作。 - Mr.Devops

Answer 7

I FIND THIS TO SOLVE MY PROBLEM

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,
});

- Sean Cortez