如何从json中获取图像并显示它答案

【问题标题】：how to get image from json and display it如何从json中获取图像并显示它
【发布时间】：2020-11-07 17:02:37
【问题描述】：

我用json从后端获取照片地址，但是如何将其设置为src图像并显示此图像？

 $.post(               
       "{%url 'validate_email' %}",
         {
           email: $("#members_email").val()
         },
          function (data, status) {
              console.log("Data: " + JSON.stringify(data) + " " + status);
          }
       );

控制台输出：

Data: {"user_avatar":"/media/mizbanuser/profile_img/2020-10- 
        27_095908.3275338039170.jpg","status":true} success

【问题讨论】：

你有你的照片网址......只需添加你的主机/来源。本地主机或域 www.mysite.com/media/mizbanuser/profile....

标签： javascript html jquery json

【解决方案1】：

function createIMG (data, status) {
  var img = document.createElement('img')
  img.setAttribute("src", data.user_avatar);
  document.body.appendChild(img)
}

//simulate the input:
createIMG({"user_avatar":"/media/mizbanuser/profile_img/2020-10- 27_095908.3275338039170.jpg","status":true}, 'success')

如果要将document.body 添加到特定元素，可以将其更改为document.getElementById('<insert parent element here>')。第 2 行创建元素，第 3 行设置 src，第 4 行将元素放入 body。最后你的代码应该是这样的：

 $.post(               
       "{%url 'validate_email' %}",
         {
           email: $("#members_email").val()
         },
          function (data, status) {
              var img = document.createElement('img')
              img.setAttribute("src", data.user_avatar);
              document.body.appendChild(img)
          }
       );

或者如果你想先检查成功：

 $.post(               
       "{%url 'validate_email' %}",
         {
           email: $("#members_email").val()
         },
          function (data, status) {
              if (status == 'success') {
                  var img = document.createElement('img')
                  img.setAttribute("src", data.user_avatar);
                  document.body.appendChild(img)
              } else {
                  // handle error
              }
          }
       );

【讨论】：