Putting image on a html page from API response?
Question
I am very new to web development, ajax etc. I have access to Tenor api, so I can send a request like this:
https://api.tenor.com/v1/random?q=MYQUERYSTRING&key=MYAPIKEY&limit=1
It responds with an JSON document, which looks like this (I am pasting just the important stuff):
{
"results": [
{
"tags": [],
"url": "https://tenor.com/0liG.gif",
"media": [ some other JSON data down there ]
}]
}
Now I need to access that url parameter. After a bit of googling I have found a partial solution:
<!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>
But the image is not displayed.
I have opened the console, and I am absolutely sure that the response is full of data and contains the URL to the image I need.
How can I display this image?
4 answers
solution1
3 2019-01-10 12:22:42
You need to set the src attribute of the image. Also, results is an array.
$.ajax( settings ).done( function ( response ) {
$( '#myUrl' ).attr( 'src', response.results[ 0 ].url );
} );
solution2
0 2019-01-10 12:23:07
Try to replace
$("#myUrl").append(content);
with
$("#myUrl").attr('src', content);
solution3
0 2019-01-10 12:25:35
You need to set the src attribute img tag as follows,
$.ajax( settings ).done( function ( response ) {
if (response.results[0].length > 0) {
var content = response.results[0].url;
$( '#myUrl' ).attr( 'src', content );
}
});
solution4
0 2019-01-10 13:16:10
I can see 2 mistakes on your code based on response object that you gave.
First:
$.ajax(settings).done(function (response) {
console.log(response);
var content = response.results.url;
$("#myUrl").append(content);
});
var content = response.results.url;
should be
var content = response.results[0].url;
Second:
the $("#myUrl").append(content); should be $("#myUrl").attr('src', content);
It Should Worrk after these 2 steps. but if it doesn't follow to
Third:
wrap everything inside $.ajax() with $(document).ready() like following code:
$.ajax(settings).done(function (response) { $(document).ready(function(){ console.log(response); var content = response.results[0].url; $("#myUrl").attr('src', content); }); });
Hope thats solved your problem
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.