在javascript中返回html img標記

我正在做一個簡單的項目，我在香草javascript中顯示我的github配置文件。在javascript中返回html img標記

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做練習：/

來源

2017-05-27 Fidel Castro

設置圖像源而不是將其添加到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>

來源

2017-05-27 02:52:59 Tomanow

感謝隊友！它的工作原理：D –

很高興幫助！與編碼伴侶祝你好運！ – Tomanow

在javascript中返回html img標記

回答

相關問題