我正在做一个简单的项目，用普通的 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 上做练习:/
最佳答案
设置图像源而不是将其添加到 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 - 在javascript中返回一个html img标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44212425/