使用 jQuery 请求在 HTML 上显示 svg答案

【问题标题】：Display svg on HTML with jQuery request使用 jQuery 请求在 HTML 上显示 svg
【发布时间】：2020-09-25 14:39:22
【问题描述】：

当我单击按钮时，我试图从 API 中获取此头像以显示在我的 HTML 中，但它不起作用。


$(document).ready(function () {

    $("#generate").click(function(){
        var c= $("#c").val().split(",");

        $.ajax({
            method: 'GET',
            url: "https://avatars.dicebear.com/api/male/example.svg",
            dataType: "svg"
        })
            .done(function(result){
                $('#result').html('<img src="data:image/png;base64,' + result + '" />');
            })

            .fail(function(error){
                console.log(error);
            });
    })


 });

【问题讨论】：

标签： javascript jquery api svg get-request

【解决方案1】：

svg 不是 AJAX 请求的有效数据类型。此外，您不能将 SVG 文件的内容设置为 img 元素的 base64 编码内容。

完全不需要 AJAX。只需将img 元素的src 设置为svg 文件的URL：

&lt;img src="https://avatars.dicebear.com/api/male/example.svg" /&gt;

【讨论】：

我需要 AJAX 的原因是因为我想切换 URL，所以它实际上看起来像这样："avatars.dicebear.com/api" + c[0]+ "/" + c[1] + ".svg" ------- c[0] 和 c[1] 是用户输入
您不需要 AJAX。您可以使用prop()根据用户输入动态修改src。
哦，好吧，对不起，我是初学者。感谢您的帮助！
没问题，很高兴为您提供帮助

【解决方案2】：

要使用 AJAX，您可以这样做：

  $("#generate").click(function(){
      $.ajax({
          method: 'GET',
          url: "https://avatars.dicebear.com/api/male/example.svg",
          dataType: "html"
      })

      .done(function(result){
          $('#result').html(result);
      })

      .fail(function(error){
          console.log(error);
      });
  })

【讨论】：