Post
Ask Question

Learn About Bing Image Search API

This article provides the creation and the demonstration of the Bing Image API on the Azure Portal using the Bing Search API in the Microsoft Azure. The Bing Image Search API provides an experience similar to Google.com/Images by allowing you to send a query to Bing and the result will produce the relevant images for the query.
 
Prerequisites
  • An Azure Account.
Let's start to create the Bing Image Search on The Azure Portal:
 
Step-1
 
Sign-in into the Azure Portal.
 
Step-2
 
In the Portal, Press "+New" then "AI+Cognitive Services" and followed by "Bing Search API."

 
 
Step-3
 
In the Create Blade, Enter the name for our API and choose the desired subscription for our API and then choose the desired pricing tier and click "Select."



Step-4
 
Then create a new resource group for our API and then accept the conditions for the data monitoring on our API and then press "Create."



Step-5
 
After the successful creation of our API then it opens the properties of our API and press "Keys" to get our keys.



Step-6
 
It open Manage keys blade, press the copy button and paste it in our clipboard. 


Step-7
 
Here we are going to create the single webpage app, then we are using the keys on the webpage to perform the Image search operation.copy and paste the code into your notepad and save the document as HTML. 
  1. <!DOCTYPE html>  
  2. <!-- saved from url=(0014)about:internet -->  
  3. <!-- the above Mark of the Web lets IE run this page in the Internet security zone,  
  4.      avoiding the permission prompt for running active content such as JavaScript -->  
  5. <html>  
  6. <head>  
  7.     <meta charset="UTF-8">   
  8.     <title>Bing Image Search API Demo</title>  
  9.     <base target="_blank">  
  10. <style type="text/css">  
  11.   
  12. html, body, div, p, h1, h2 {font-family: Verdana, "Lucida Sans", sans-serif; color: #000;}  
  13. html, body, div, p  {font-weight: normal;}  
  14. body {background-color: #fff;}  
  15.   
  16. h1, h2, h3 {font-weight: bold; color: #087;}  
  17. sup {font-weight: normal;}  
  18.   
  19. html, body, div, p  {font-size: 12px;}  
  20. h1 {font-size: 20px; margin-top: 30px;}  
  21. h2 {font-size: 16px; clear: left;}  
  22. h3 {font-size: 14px; clear: left;}  
  23.   
  24. #sidebar {font-size: 10px; text-align: right; display: flex; padding: 0px 10px;   
  25.     float: right; margin-left: 15px; margin-right: 0px;}  
  26. #sidebar p {margin-top: 0px; font-size: 10px;}  
  27. #sidebar img {display: inline-block; float: none; padding-right: 0px;}  
  28. #pole p {font-size: 14px;}  
  29. #pole, #mainline, #json, #http, #sidebar, #error, #paging1, #paging2   
  30.     {display: none;}  
  31.   
  32. #term {width: 100%;}  
  33. #logo {padding: 15px; float: right; border-left: 2px solid #ccc;}  
  34. #query {float: left;}  
  35.   
  36. img {vertical-align: top; float: left; margin-right: 10px; margin-bottom: 10px;}  
  37. p.images {display: inline-block; font-size: 9px; vertical-align: top;}  
  38. p.images img {float: none;}  
  39. p.relatedSearches {clear: none;}  
  40. #logo p, p.news, p.webPages, p.images {clear: left;}  
  41.   
  42. a[href="#"]:link {color: blue;}  
  43. a[href="#"]:visited {color: blue;}  
  44.   
  45. h3 a:visited {color: #087 !important;}  
  46. h3 a:link {color: #087 !important;}  
  47.   
  48. </style>  
  49. <script type="text/javascript">  
  50.   
  51. // cookie names for data we store  
  52. // YOUR API KEY DOES NOT GO IN THIS CODE; don't paste it in.  
  53. API_KEY_COOKIE   = "bing-search-api-key";  
  54. CLIENT_ID_COOKIE = "bing-search-client-id";  
  55.   
  56. // Bing Search API endpoint  
  57. BING_ENDPOINT = "https://api.cognitive.microsoft.com/bing/v7.0/images/search";  
  58.   
  59. // Various browsers differ in their support for persistent storage by local  
  60. // HTML files (IE won't use localStorage, but Chrome won't use cookies). So  
  61. // use localStorage if we can, otherwise use cookies.  
  62.   
  63. try {  
  64.     localStorage.getItem;   // try localStorage  
  65.   
  66.     window.retrieveValue = function (name) {  
  67.         return localStorage.getItem(name) || "";  
  68.     }  
  69.     window.storeValue = function(name, value) {  
  70.         localStorage.setItem(name, value);  
  71.     }  
  72. } catch (e) {  
  73.     window.retrieveValue = function (name) {  
  74.         var cookies = document.cookie.split(";");  
  75.         for (var i = 0; i < cookies.length; i++) {  
  76.             var keyvalue = cookies[i].split("=");  
  77.             if (keyvalue[0].trim() === name) return keyvalue[1];  
  78.         }  
  79.         return "";  
  80.     }  
  81.     window.storeValue = function (name, value) {  
  82.         var expiry = new Date();  
  83.         expiry.setFullYear(expiry.getFullYear() + 1);  
  84.         document.cookie = name + "=" + value.trim() + "; expires=" + expiry.toUTCString();  
  85.     }  
  86. }  
  87.   
  88. // get stored API subscription key, or prompt if it's not found  
  89. function getSubscriptionKey() {  
  90.     var key = retrieveValue(API_KEY_COOKIE);  
  91.     while (key.length !== 32) {  
  92.         key = prompt("Enter Bing Search API subscription key:", "").trim();  
  93.     }  
  94.     // always set the cookie in order to update the expiration date  
  95.     storeValue(API_KEY_COOKIE, key);  
  96.     return key;  
  97. }  
  98.   
  99. // invalidate stored API subscription key so user will be prompted again  
  100. function invalidateSubscriptionKey() {  
  101.     storeValue(API_KEY_COOKIE, "");  
  102. }  
  103.   
  104. // escape text for use in HTML  
  105. function escape(text) {  
  106.     return text.replace(/&/g, "&").replace(/</g, "<").  
  107.         replace(/'/g, "'").replace(/"/g, """);  
  108. }  
  109.   
  110. // get the host portion of a URL, strpping out search result formatting and www too  
  111. function getHost(url) {  
  112.     return url.replace(/<\/?b>/g, "").replace(/^https?:\/\//, "").split("/")[0].replace(/^www\./, "");  
  113. }  
  114.   
  115. // format plain text for display as an HTML <pre> element  
  116. function preFormat(text) {  
  117.     text = "" + text;  
  118.     return "<pre>" + text.replace(/&/g, "&").replace(/</g, "<") + "</pre>"  
  119. }  
  120.   
  121. // put HTML markup into a <div> and reveal it  
  122. function showDiv(id, html) {  
  123.     var content = document.getElementById("_" + id)  
  124.     if (content) content.innerHTML = html;  
  125.     var wrapper = document.getElementById(id);  
  126.     if (wrapper) wrapper.style.display = html.trim() ? "block" : "none";  
  127. }  
  128.   
  129. // hides the specified <div>s  
  130. function hideDivs() {  
  131.     for (var i = 0; i < arguments.length; i++) {  
  132.         var element = document.getElementById(arguments[i])  
  133.         if (element) element.style.display = "none";  
  134.     }  
  135. }  
  136.   
  137. // render functions for various types of search results  
  138. searchItemRenderers = {   
  139.     images: function (item, index, count) {  
  140.         var height = 120;  
  141.         var width = Math.max(Math.round(height * item.thumbnail.width / item.thumbnail.height), 120);  
  142.         var html = [];  
  143.         if (index === 0) html.push("<p class='images'>");  
  144.         var title = escape(item.name) + "\n" + getHost(item.hostPageDisplayUrl);  
  145.         html.push("<p class='images' style='max-width: " + width + "px'>");  
  146.         html.push("<img src='"+ item.thumbnailUrl + "&h=" + height + "&w=" + width +   
  147.             "' height=" + height + " width=" + width + "'>");  
  148.         html.push("<br>");  
  149.         html.push("<nobr><a href='" + item.contentUrl + "'>Image</a> - ");  
  150.         html.push("<a href='" + item.hostPageUrl + "'>Page</a></nobr><br>");  
  151.         html.push(title.replace("\n", " (").replace(/([a-z0-9])\.([a-z0-9])/g, "$1.<wbr>$2") + ")</p>");  
  152.         return html.join("");  
  153.     },  
  154.     relatedSearches: function(item) {  
  155.         var html = [];  
  156.         html.push("<p class='relatedSearches'>");  
  157.         html.push("<a href='#' onclick='return doRelatedSearch("" +   
  158.             escape(item.text) + "")'>");  
  159.         html.push(item.displayText + "</a>");  
  160.         return html.join("");  
  161.     }  
  162. }  
  163.   
  164.   
  165. // render image search results  
  166. function renderImageResults(items) {  
  167.     var len = items.length;  
  168.     var html = [];  
  169.     if (!len) {  
  170.         showDiv("noresults", "No results.");  
  171.         hideDivs("paging1", "paging2");  
  172.         return "";  
  173.     }  
  174.     for (var i = 0; i < len; i++) {  
  175.         html.push(searchItemRenderers.images(items[i], i, len));  
  176.     }  
  177.     return html.join("\n\n");  
  178. }  
  179.   
  180. // render related items  
  181. function renderRelatedItems(items) {  
  182.     var len = items.length;  
  183.     var html = [];  
  184.     for (var i = 0; i < len; i++) {  
  185.         html.push(searchItemRenderers.relatedSearches(items[i], i, len));  
  186.     }  
  187.     return html.join("\n\n");  
  188. }  
  189.   
  190. // render the search results given the parsed JSON response  
  191. function renderSearchResults(results) {  
  192.   
  193.     // add Prev / Next links with result count  
  194.     var pagingLinks = renderPagingLinks(results);  
  195.     showDiv("paging1", pagingLinks);  
  196.     showDiv("paging2", pagingLinks);  
  197.   
  198.     showDiv("results", renderImageResults(results.value));  
  199.     if (results.relatedSearches)  
  200.         showDiv("sidebar", renderRelatedItems(results.relatedSearches));  
  201. }  
  202.   
  203. function renderErrorMessage(message) {  
  204.     showDiv("error", preFormat(message));  
  205.     showDiv("noresults", "No results.");  
  206. }  
  207.   
  208. // handle Bing search request results  
  209. function handleBingResponse() {  
  210.     hideDivs("noresults");  
  211.   
  212.     var json = this.responseText.trim();  
  213.     var jsobj = {};  
  214.   
  215.     // try to parse JSON results  
  216.     try {  
  217.         if (json.length) jsobj = JSON.parse(json);  
  218.     } catch(e) {  
  219.         renderErrorMessage("Invalid JSON response");  
  220.     }  
  221.   
  222.     // show raw JSON and HTTP request  
  223.     showDiv("json", preFormat(JSON.stringify(jsobj, null, 2)));  
  224.     showDiv("http", preFormat("GET " + this.responseURL + "\n\nStatus: " + this.status + " " +   
  225.         this.statusText + "\n" + this.getAllResponseHeaders()));  
  226.   
  227.     // if HTTP response is 200 OK, try to render search results  
  228.     if (this.status === 200) {  
  229.         var clientid = this.getResponseHeader("X-MSEdge-ClientID");  
  230.         if (clientid) retrieveValue(CLIENT_ID_COOKIE, clientid);  
  231.         if (json.length) {  
  232.             if (jsobj._type === "Images") {  
  233.                 if (jsobj.nextOffset) document.forms.bing.nextoffset.value = jsobj.nextOffset;  
  234.                 renderSearchResults(jsobj);  
  235.             } else {  
  236.                 renderErrorMessage("No search results in JSON response");  
  237.             }  
  238.         } else {  
  239.             renderErrorMessage("Empty response (are you sending too many requests too quickly?)");  
  240.         }  
  241.     }  
  242.   
  243.     // Any other HTTP response is an error  
  244.     else {  
  245.         // 401 is unauthorized; force re-prompt for API key for next request  
  246.         if (this.status === 401) invalidateSubscriptionKey();  
  247.   
  248.         // some error responses don't have a top-level errors object, so gin one up  
  249.         var errors = jsobj.errors || [jsobj];  
  250.         var errmsg = [];  
  251.   
  252.         // display HTTP status code  
  253.         errmsg.push("HTTP Status " + this.status + " " + this.statusText + "\n");  
  254.   
  255.         // add all fields from all error responses  
  256.         for (var i = 0; i < errors.length; i++) {  
  257.             if (i) errmsg.push("\n");  
  258.             for (var k in errors[i]) errmsg.push(k + ": " + errors[i][k]);  
  259.         }  
  260.   
  261.         // also display Bing Trace ID if it isn't blocked by CORS  
  262.         var traceid = this.getResponseHeader("BingAPIs-TraceId");  
  263.         if (traceid) errmsg.push("\nTrace ID " + traceid);  
  264.   
  265.         // and display the error message  
  266.         renderErrorMessage(errmsg.join("\n"));  
  267.     }  
  268. }  
  269.   
  270. // perform a search given query, options string, and API key  
  271. function bingImageSearch(query, options, key) {  
  272.   
  273.     // scroll to top of window  
  274.     window.scrollTo(0, 0);  
  275.     if (!query.trim().length) return false;     // empty query, do nothing  
  276.   
  277.     showDiv("noresults", "Working. Please wait.");  
  278.     hideDivs("results", "related", "_json", "_http", "paging1", "paging2", "error");  
  279.   
  280.     var request = new XMLHttpRequest();  
  281.     var queryurl = BING_ENDPOINT + "?q=" + encodeURIComponent(query) + "&" + options;  
  282.   
  283.     // open the request  
  284.     try {  
  285.         request.open("GET", queryurl);  
  286.     }   
  287.     catch (e) {  
  288.         renderErrorMessage("Bad request (invalid URL)\n" + queryurl);  
  289.         return false;  
  290.     }  
  291.   
  292.     // add request headers  
  293.     request.setRequestHeader("Ocp-Apim-Subscription-Key", key);  
  294.     request.setRequestHeader("Accept", "application/json");  
  295.     var clientid = retrieveValue(CLIENT_ID_COOKIE);  
  296.     if (clientid) request.setRequestHeader("X-MSEdge-ClientID", clientid);  
  297.   
  298.     // event handler for successful response  
  299.     request.addEventListener("load", handleBingResponse);  
  300.   
  301.     // event handler for erorrs  
  302.     request.addEventListener("error", function() {  
  303.         renderErrorMessage("Error completing request");  
  304.     });  
  305.   
  306.     // event handler for aborted request  
  307.     request.addEventListener("abort", function() {  
  308.         renderErrorMessage("Request aborted");  
  309.     });  
  310.   
  311.     // send the request  
  312.     request.send();  
  313.     return false;  
  314. }  
  315.   
  316. // build query options from the HTML form  
  317. function bingSearchOptions(form) {  
  318.   
  319.     var options = [];  
  320.     options.push("mkt=" + form.where.value);  
  321.     options.push("SafeSearch=" + (form.safe.checked ? "strict" : "off"));  
  322.     if (form.when.value.length) options.push("freshness=" + form.when.value);  
  323.     var aspect = "all";  
  324.     for (var i = 0; i < form.aspect.length; i++) {  
  325.         if (form.aspect[i].checked) {  
  326.             aspect = form.aspect[i].value;  
  327.             break;  
  328.         }  
  329.     }  
  330.     options.push("aspect=" + aspect);  
  331.     if (form.color.value) options.push("color=" + form.color.value);  
  332.     options.push("count=" + form.count.value);  
  333.     options.push("offset=" + form.offset.value);  
  334.     return options.join("&");  
  335. }  
  336.   
  337. // toggle display of a div (used by JSON/HTTP expandos)  
  338. function toggleDisplay(id) {  
  339.   
  340.     var element = document.getElementById(id);  
  341.     if (element) {  
  342.         var display = element.style.display;  
  343.         if (display === "none") {  
  344.             element.style.display = "block";  
  345.             window.scrollBy(0, 200);  
  346.         } else {  
  347.             element.style.display = "none";  
  348.         }  
  349.     }  
  350.     return false;  
  351. }  
  352.   
  353. // perform a related search (used by related search links)  
  354. function doRelatedSearch(query) {  
  355.     var bing = document.forms.bing;  
  356.     bing.query.value = query;  
  357.     return newBingImageSearch(bing);  
  358. }  
  359.   
  360. // generate the HTML for paging links (prev/next)  
  361. function renderPagingLinks(results) {  
  362.   
  363.     var html = [];  
  364.     var bing = document.forms.bing;  
  365.     var offset = parseInt(bing.offset.value, 10);  
  366.     var count = parseInt(bing.count.value, 10);  
  367.     html.push("<p class='paging'><i>Results " + (offset + 1) + " to " + (offset + count));  
  368.     html.push(" of about " + results.totalEstimatedMatches + ".</i> ");  
  369.     html.push("<a href='#' onclick='return doPrevSearchPage()'>Prev</a> | ");  
  370.     html.push("<a href='#' onclick='return doNextSearchPage()'>Next</a>");  
  371.     return html.join("");  
  372. }  
  373.   
  374. // go to the next page (used by next page link)  
  375. function doNextSearchPage() {  
  376.   
  377.     var bing = document.forms.bing;  
  378.     var query = bing.query.value;  
  379.     var offset = parseInt(bing.offset.value, 10);  
  380.     var stack = JSON.parse(bing.stack.value);  
  381.     stack.push(parseInt(bing.offset.value, 10));  
  382.     bing.stack.value = JSON.stringify(stack);  
  383.     bingbing.offset.value = bing.nextoffset.value;  
  384.     return bingImageSearch(query, bingSearchOptions(bing), getSubscriptionKey());  
  385. }  
  386.   
  387. // go to the previous page (used by previous page link)  
  388. function doPrevSearchPage() {  
  389.   
  390.     var bing = document.forms.bing;  
  391.     var query = bing.query.value;  
  392.     var stack = JSON.parse(bing.stack.value);  
  393.     if (stack.length) {  
  394.         var offset = stack.pop();  
  395.         var count = parseInt(bing.count.value, 10);  
  396.         bing.stack.value = JSON.stringify(stack);  
  397.         bing.offset.value = offset;  
  398.         return bingImageSearch(query, bingSearchOptions(bing), getSubscriptionKey());  
  399.     }  
  400.     alert("You're already at the beginning!");  
  401.     return false;  
  402. }  
  403.   
  404. function newBingImageSearch(form) {  
  405.     form.offset.value = "0";  
  406.     form.stack.value = "[]";  
  407.     return bingImageSearch(form.query.value, bingSearchOptions(form), getSubscriptionKey());  
  408. }  
  409. // --></script>  
  410.   
  411. </head>  
  412. <body onload="document.forms.bing.query.focus();">  
  413.   
  414. <form name="bing" onsubmit="return newBingImageSearch(this)">  
  415.   
  416. <div id="logo"><!-- logo block including search market/language -->  
  417.     <img src="data:image/png;base64,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">  
  418.     <I>api</I>  
  419.     <p><select name="where">  
  420.             <option value="es-AR">Argentina (Spanish)</option>  
  421.             <option value="en-AU">Australia (English)</option>  
  422.             <option value="de-AT">Austria (German)</option>  
  423.             <option value="nl-BE">Belgium (Dutch)</option>  
  424.             <option value="fr-BE">Belgium (French)</option>  
  425.             <option value="pt-BR">Brazil (Portuguese)</option>  
  426.             <option value="en-CA">Canada (English)</option>  
  427.             <option value="fr-CA">Canada (French)</option>  
  428.             <option value="es-CL">Chile (Spanish)</option>  
  429.             <option value="da-DK">Denmark (Danish)</option>  
  430.             <option value="fi-FI">Finland (Finnish)</option>  
  431.             <option value="fr-FR">France (French)</option>  
  432.             <option value="de-DE">Germany (German)</option>  
  433.             <option value="zh-HK">Hong Kong (Traditional Chinese)</option>  
  434.             <option value="en-IN">India (English)</option>  
  435.             <option value="en-ID">Indonesia (English)</option>  
  436.             <option value="it-IT">Italy (Italian)</option>  
  437.             <option value="ja-JP">Japan (Japanese)</option>  
  438.             <option value="ko-KR">Korea (Korean)</option>  
  439.             <option value="en-MY">Malaysia (English)</option>  
  440.             <option value="es-MX">Mexico (Spanish)</option>  
  441.             <option value="nl-NL">Netherlands (Dutch)</option>  
  442.             <option value="en-NZ">New Zealand (English)</option>  
  443.             <option value="no-NO">Norway (Norwegian)</option>  
  444.             <option value="zh-CN">People's Republic of China (Chinese)</option>  
  445.             <option value="pl-PL">Poland (Polish)</option>  
  446.             <option value="pt-PT">Portugal (Portuguese)</option>  
  447.             <option value="en-PH">Philippines (English)</option>  
  448.             <option value="ru-RU">Russia (Russian)</option>  
  449.             <option value="ar-SA">Saudi Arabia (Arabic)</option>  
  450.             <option value="en-ZA">South Africa (English)</option>  
  451.             <option value="es-ES">Spain (Spanish)</option>  
  452.             <option value="sv-SE">Sweden (Swedish)</option>  
  453.             <option value="fr-CH">Switzerland (French)</option>  
  454.             <option value="de-CH">Switzerland (German)</option>  
  455.             <option value="zh-TW">Taiwan (Traditional Chinese)</option>  
  456.             <option value="tr-TR">Turkey (Turkish)</option>  
  457.             <option value="en-GB">United Kingdom (English)</option>  
  458.             <option value="en-US" selected>United States (English)</option>  
  459.             <option value="es-US">United States (Spanish)</option>  
  460.         </select>  
  461.     <p>from Microsoft Cognitive Services  
  462. </div>  
  463.   
  464. <div id="query"><!-- query controls including search field and options -->  
  465.     <h1>Bing Image Search API demo</h2>      
  466.   
  467.         <input type="text" name="query" id="term" placeholder="Search for images" autocomplete=off>  
  468.   
  469.         <p>Aspect  
  470.     <input type=radio name="aspect" id="any" value="all" checked>  
  471.         <label for="any">Any</label>  
  472.     <input type=radio name="aspect" id="square" value="square">  
  473.         <label for="square">Square</label>  
  474.     <input type=radio name="aspect" id="wide" value="wide">  
  475.         <label for="wide">Wide</label>  
  476.     <input type=radio name="aspect" id="tall" value="tall">  
  477.         <label for="tall">Tall</label>  
  478.   
  479.            Color  
  480.     <select name="color">  
  481.         <option value="" selected>Any</option>  
  482.         <option value="coloronly">Only Color</option>  
  483.         <option value="monochrome">Black and White</option>  
  484.         <option value="black">Black</option>  
  485.         <option value="blue">Blue</option>  
  486.         <option value="black">Brown</option>  
  487.         <option value="gray">Gray</option>  
  488.         <option value="green">Green</option>  
  489.         <option value="orange">Orange</option>  
  490.         <option value="pink">Pink</option>  
  491.         <option value="purple">Purple</option>  
  492.         <option value="red">Red</option>  
  493.         <option value="teal">Teal</option>  
  494.         <option value="white">White</option>  
  495.         <option value="yellow">Yellow</option>                  
  496.     </select>  
  497.   
  498.            From  
  499.     <select name="when">  
  500.         <option value="" selected>All time</option>  
  501.         <option value="month">Past month</option>  
  502.         <option value="week">Past week</option>  
  503.         <option value="day">Last 24 hours</option>  
  504.     </select>  
  505.   
  506.        <input type=checkbox id="safe" name="safe" value="on" checked><label for="safe">SafeSearch</label>  
  507.   
  508.     <!-- these hidden fields control paging -->  
  509.     <input type=hidden name="count" value="25">  
  510.     <input type=hidden name="offset" value="0">  
  511.     <input type=hidden name="nextoffset" value="">      
  512.     <input type=hidden name="stack" value="[]">  
  513. </form>  
  514.   
  515. </div>  
  516.     <div id="error">  
  517.     <h2>Error</h2>  
  518.     <div id="_error">  
  519.     </div>  
  520. </div>  
  521.   
  522. <h2>Results</h2>  
  523. <div id="paging1">  
  524.     <div id="_paging1"></div>  
  525. </div>  
  526.   
  527. <div id="noresults">  
  528.     <div id="_noresults">None yet.</div>  
  529. </div>  
  530.   
  531. <div id="sidebar">  
  532.     <div id="_sidebar"></div>  
  533. </div>  
  534.   
  535. <div id="results">  
  536.     <div id="_results"></div>  
  537. </div>  
  538.   
  539.   
  540. <div id="paging2">  
  541.     <div id="_paging2"></div>  
  542. </div>  
  543.   
  544. <div id="json">  
  545.     <h3><a href="#" onclick="return toggleDisplay('_json')">JSON</a></h3>  
  546.     <div id="_json" style="display: none"></div>  
  547. </div>  
  548.   
  549. <div id="http">  
  550.     <h3><a href="#" onclick="return toggleDisplay('_http')">HTTP</a></h3>  
  551.     <div id="_http" style="display: none"></div>  
  552. </div>  
  553.   
  554. </body>  
  555. </html>  
On the 53rd and 54th line of our code, paste the Keys and then open the web page.
 
Step-8
 
On the web page, In the search bar, enter the query and it shows the result as per the query.

 
Summary
 
I hope you understood how to create the Bing Image search API and the Demonstration of the API.


Similar Articles