我对 Web 开发、ajax 等非常陌生。我可以访问 Tenor api，因此我可以发送如下请求:
https://api.tenor.com/v1/random?q=MYQUERYSTRING&key=MYAPIKEY&limit=1
它响应一个 JSON 文档，如下所示(我只粘贴重要的内容):
{
"results": [
{
"tags": [],
"url": "https://tenor.com/0liG.gif",
"media": [ some other JSON data down there ]
}]
}
现在我需要访问该 url 参数。经过一番谷歌搜索后，我找到了部分解决方案:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<title>Sample Page</title>
<script>
var settings = {
"async": true,
"crossDomain": true,
"url": "https://api.tenor.com/v1/random?q=MYQUERY&key=MYAPIKEY&limit=1",
"method": "GET"
}
$.ajax(settings).done(function (response) {
console.log(response);
var content = response.results.url;
$("#myUrl").append(content);
});
</script>
</head>
<body>
<h1>Sample Page</h1>
<div id="someid">URL:
<img id="myUrl" src="" />
</div>
</body>
</html>
但图像未显示。
我已打开控制台，并且我绝对确定响应充满数据并包含我需要的图像的 URL。
如何显示该图像？
最佳答案
您需要设置图像的src属性。另外，results 是一个数组。
$.ajax( settings ).done( function ( response ) {
$( '#myUrl' ).attr( 'src', response.results[ 0 ].url );
} );
关于javascript - 将 API 响应中的图像放在 html 页面上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54128575/