Google Image return using Javascript

Ask for Help
1

I am building a travel app and want to automatically fill out an image for a location, eg a cafe to visit. As the normal resources like Pexels and unsplashed are too generic, I was looking to extract the first Google Image result.

I tried doing this using Bards help and got the following result:

Glide.fetch(‘https://www.googleapis.com/customsearch/v1?key=YOUR_API_KEY&q=KEYWORD’)

.then(response => {

const data = JSON.parse(response.body);

const firstImage = data.items[0].link;

// Use the firstImage URL as needed

})

.catch(error => {

console.error(error);

});

But I think the Glide.fetch is wrong and not initiating the code. Any JS gurus able to help?

2

yeah, there are a couple of things wrong with that :slight_smile:

  • there is no such thing as Glide.fetch, so that will fail right away
  • the code doesn’t actually return anything
  • your API key will be loaded on the client device, so it is potentially exposed

Which plan are you on?
If you have a Business or Enterprise Plan, you may find this easier (and more secure) using a Call API action.

3

Thanks Darren. I am on Starter so don’t have access to Glide’s API’s. After more research I cant find a ways its possible which is a shame as the existing tools to automatically extract images are very generic.
If there’s any advice on tools to use it that would be great. I have been trying out different google or bing API’s but cant work it to retrieve the direct URL to embed in the app.

4

I wonder if the new Get Webpage Source may be useful in this case… :thinking:

1 Like
5

One option on a Starter Plan would be to connect a Google Sheet, and use Apps Script to fetch the image link.

  • Advantages
    – It will be secure
    – It will work
  • Disadvantages
    – Requires some Apps Script knowledge
    – Will be slow, as you’ll have to wait for the sheet to sync
1 Like
6

I’ve got this working in a google sheet without app scripts !

=MAP(B1:B;LAMBDA(n;{n\TRANSPOSE(QUERY(IMPORTXML(“https://www.google.com/search?q=“&n&”&source=lnms&tbm=isch”; “//a//@src”);“where Col1 contains ‘image’ limit 2”))}))

Put this in a new column and have 3 columns after completly empty to let the map formula expand. The “B” column will be the one where every cell will be used for the google image searched.