在javascript中返回html img標簽

Question

我正在做一個簡單的項目，用香草javascript顯示我的github個人資料。

 let requestURL = 'https://api.github.com/users/fcfidel'; var request = new XMLHttpRequest(); request.open('GET', requestURL); request.responseType = 'json'; request.send(); request.onload = function() { var githubInfo = request.response; populateHeader(githubInfo); //showGithubInfo(githubInfo); } function populateHeader(jsonObj) { var myH1 = document.createElement('h1'); //myH1.textContent = jsonObj['login']; myH1.textContent = `<img src="${jsonObj['avatar_url']}" />`; image.appendChild(myH1); var myPara = document.createElement('p'); myPara.textContent = 'Name: ' + jsonObj['name'] + ' // Formed: ' + jsonObj['created_at']; image.appendChild(myPara); }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="application/javascript" src="main.js"></script> </head> <body> <div class="image"></div> <div class="name"></div> <script> var image = document.querySelector('.image'); var name = document.querySelector('.name'); </script> </body> </html>

我正在嘗試找到一種方法來返回JavaScript中的內容，但我卻找不到方法:(

我找到一種方法的唯一方法是使用模板文字，它可以工作，但不是我想要的，它確實返回了我想要的東西，但是...

結果是： 我知道解決方案確實很簡單，但我什至不能再...

這是我想要的結果：

我正在學習JavaScript我仍然很菜...我正在從MDN進行練習：/

Answer 1

設置圖像源，而不是將其添加到div。 反引號也無濟於事！

添加圖像標簽並修改ajax調用以使用：

document.querySelector('#my-image').src = jsonObj['avatar_url'];

 let requestURL = 'https://api.github.com/users/fcfidel'; var request = new XMLHttpRequest(); request.open('GET', requestURL); request.responseType = 'json'; request.send(); request.onload = function() { var githubInfo = request.response; populateHeader(githubInfo); //showGithubInfo(githubInfo); } function populateHeader(jsonObj) { var myH1 = document.createElement('h1'); //myH1.textContent = jsonObj['login']; //myH1.textContent = `<img src="${jsonObj['avatar_url']}" />`; //image.appendChild(myH1); var myPara = document.createElement('p'); myPara.textContent = 'Name: ' + jsonObj['name'] + ' // Formed: ' + jsonObj['created_at']; image.appendChild(myPara); document.querySelector('#my-image').src = jsonObj['avatar_url']; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="application/javascript" src="main.js"></script> </head> <body> <div class="image"> <img id="my-image" src="" /> </div> <div class="name"></div> <script> var image = document.querySelector('.image'); var name = document.querySelector('.name'); </script> </body> </html>

在javascript中返回html img標簽

問題描述

1 個解決方案

解決方案1
3 已采納 2017-05-27 02:52:59

在javascript中返回html img標簽

問題描述

1 個解決方案

解決方案1 3 已采納 2017-05-27 02:52:59

解決方案1
3 已采納 2017-05-27 02:52:59