在 javascript 中加载 Image Ranomizer API 以在 HTML 上显示
Posted
技术标签:
【中文标题】在 javascript 中加载 Image Ranomizer API 以在 HTML 上显示【英文标题】：Loading in an Image Ranomizer API within javascript to display on an HTML 【发布时间】：2021-03-23 19:43:42 【问题描述】：我对编程很陌生。
我正在做一个学校项目，我获得了一个 API，每次刷新网络浏览器时都会显示随机的狗。无论出于何种原因，我都会收到 404 错误，但我可以看到 url 在控制台中随着狗品种的变化而变化。在我的 html 页面上，我得到了假设要加载照片的损坏的图像图标。
这是我的代码：
let xhrdog = new XMLHttpRequest(); //first ajax request, dog photos from api
xhrdog.onreadystatechange = function()
if (xhrdog.readyState === 4)
if (xhrdog.status === 200)
let ajdog = JSON.parse(xhrdog.responseText);
let image = document.createElement('img')
image.src = ajdog //xhrdog.responseText;
let dog = document.getElementById('dog')
dog.appendChild(image);
xhrdog.open('GET', 'https://dog.ceo/api/breeds/image/random');
xhrdog.send();
任何帮助将不胜感激。
【问题讨论】：
【参考方案1】：你就快到了。只是，正如您在控制台中发现的那样，您从服务中获得的不仅仅是 img url。它正在发送一个字符串，您可以将其解析为 JSON，就像您正在做的那样。
当你解析它时，你实际上在 ajdog 中有一个对象，而不仅仅是一个字符串。其中一项是“消息”，其中包含狗图像的完整 URL。因此，请使用 ajdog.message 而不仅仅是 ajdog 来放入您的 img.src。
这是带有此更改的 sn-p：
let xhrdog = new XMLHttpRequest(); //first ajax request, dog photos from api
xhrdog.onreadystatechange = function ()
if (xhrdog.readyState === 4)
if (xhrdog.status === 200)
let ajdog = JSON.parse(xhrdog.responseText);
console.log(xhrdog.responseText);//LOOK IN THE CONSOLE TO SEE WHAT IS SENT
let image = document.createElement('img');
image.src = ajdog.message; //xhrdog.responseText;
let dog = document.getElementById('dog');
dog.appendChild(image);
xhrdog.open('GET', 'https://dog.ceo/api/breeds/image/random');
xhrdog.send();<div id="dog"></div>【讨论】：
【参考方案2】：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="" >
<script>
//https://dog.ceo/api/breeds/image/random
async function randomDog()
//store the promise with url
const result = await fetch('https://dog.ceo/api/breeds/image/random').then((data)=>
return data.json()
)
//return a object
return result
//instanstiate image
const img= document.querySelector('img')
//this function is returning a promise
randomDog().then((data)=>
//console.log(data)
img.setAttribute('src',data.message)
)
</script>
</body>
</html>
【讨论】：
这是如何从 url 获取随机图片并将其添加到您的“img”标签的属性“src”中的示例。该函数将返回一个承诺，因此您需要使用 ( .then) 方法。希望你能理解。以上是关于在 javascript 中加载 Image Ranomizer API 以在 HTML 上显示的主要内容，如果未能解决你的问题，请参考以下文章
在 React Native Image 组件中加载本地图像
UITableViewCell 如何知道从数组或字典中加载啥 JSON
QDeclarativeImageProvider 不在容器中加载图像