json 如何使用从API获取数据的响应在html中显示div中的图像？

hmae6n7t 于 2022-12-15 发布在其他

关注(0)|答案(2)|浏览(170)

我尝试在html的div中显示一个图像，我使用fetch从API中获取json数据：https://collectionapi.metmuseum.org/public/collection/v1/objects/435828。响应提供json date，图像url名为“primaryImage”。我可以用文本显示它，但不能显示为图像。

<!DOCTYPE html>
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>Image</title> 
</head> 

<body> 
<img id="test">

<script>

    let getimage = document.getElementbyId('test');
    getimage.src= "data"

    fetch('https://collectionapi.metmuseum.org/public/collection/v1/objects/435828')
    .then((response) => response.json())
    .then((data) => texting.innerText = data.primaryImage);

</script> 
</body> 
</html>

JSON

来源：https://stackoverflow.com/questions/74754203/how-display-an-image-in-a-div-in-html-using-response-from-fetch-data-from-api

2条答案

按热度按时间

piztneat1#

对于示例页，
替换;

.then((data) => texting.innerText = data.primaryImage);

符合;

.then(data => getimage.src = data.primaryImage);

赞(0）回复(0）举报 2022-12-15

piwo6bdm2#

该过程相当简单，可描述如下：

将image缓存在一个变量中，以便以后可以访问它。
向您的API发出请求。
然后将API响应解析为JSON。
然后更新image源，或者具体地说，更新src属性，作为API响应的primaryImage字段。

下面是一个现场演示：

// cache the image element so we can access it later
const img = document.getElementById('test');

// make a request to your API
fetch('https://collectionapi.metmuseum.org/public/collection/v1/objects/435828')
// parse the API response as "JSON"
.then(r => r.json())
// update the image's "src" (source)
.then(r => img.src = r.primaryImage);

<img id="test">

您还可以考虑在加载图像时添加一个加载文本或微调器，但我不打算深入研究，因为这会使我的答案超出范围。
请记住，情况并不总是这样，因为API可以不同，它们返回响应的方式也可以改变。无论如何，大多数情况下都是一样的。
我建议您看一看Fetch API及其工作原理。

赞(0）回复(0）举报 2022-12-15

我来回答

json 如何使用从API获取数据的响应在html中显示div中的图像？

2条答案

相关问题

热门标签

最新问答