[FIXED] How to use javascript + user input to search for a google image and display it in html?

Issue

I'm trying to make a javascript function that when called, will take user input from a textbox and search google images with that input and get the link from the first image that comes up and then set it as the source for an image (I have not decided on the id for the image yet), any suggestions on how to do this would be much appricated

Solution

You can do it easy with this Node library: https://www.npmjs.com/package/image-search-google Here is an example of the JS code:

    const imageSearch = require('image-search-google');
 
const client = new imageSearch('CSE ID', 'API KEY');
const options = {page:1};
client.search('APJ Abdul kalam', options)
    .then(images => {
        /*
        [{
            'url': item.link,
            'thumbnail':item.image.thumbnailLink,
            'snippet':item.title,
            'context': item.image.contextLink
        }]
         */
    })
    .catch(error => console.log(error););
 
// search for certain size
client.search('Mahatma Gandhi', {size: 'large'});
 
// search for certain type
client.search('Indira Gandhi', {type: 'face'});

With the atribute url, you can generate an a tag with this URL.

Answered By - Gaspar Giménez

Answer Checked By - Robin (PHPFixing Admin)