javascript - 从 URL 读取 JSON 以显示 IMG

Question

我正在尝试创建一个网站来分析《守望先锋》游戏中的数据。

我有这个( https://ow-api.com/v1/stats/pc/us/ShalevBito-2753/complete )，当您访问它时，您看到的只是 JSON 格式的文本。

我是否可以使用 JavaScript 读取此内容并将 ratingIcon 发送到我网站上的一个不错的标签，以便我可以显示它？

当前代码(位于 < script > 标记中:

let requestUrl = "https://ow-api.com/v1/stats/pc/us/ShalevBito-2753/complete";
let request = new XMLHttpRequest();
request.open('GET', requestUrl);
request.responseType = 'json';
request.send();
request.onload = function() {
    logData(request.response);
}
function logData(data) {
    document.querySelector('.rating').innerText = `${data['rating']}`;
    document.querySelector('.rank').innerText = `${data['ratingIcon']}`;
}

HTML:

<p class="rating"</p>
<img class="rank"</img>

Answer 1

您所要做的就是更改 img 的 src 属性

document.querySelector('.rank').src = `${data['ratingIcon']}`;

并修复您的 img 标签:

<img class="rank" />

这是一个演示:https://jsfiddle.net/dxx0y2dh/