使用 jQuery 请求在 HTML 上显示 svg

Question

我正在尝试从 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);
            });
    })


 });

Answer 1

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

做你想做的事根本不需要 AJAX。只需将 img 元素的 src 设置为 svg 文件的 URL：

<img src="https://avatars.dicebear.com/api/male/example.svg" />

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

使用 jQuery 请求在 HTML 上显示 svg

Display svg on HTML with jQuery request

javascript

api

jquery

svg

get-request