Use the Google Custom Search JSON API to retrieve images

 To use the Google Custom Search JSON API to retrieve images, you need two things:

✅ 1. Google API Key

🔧 Steps:

  1. Go to the Google Cloud Console.

  2. Create a new project (or select an existing one).

  3. In the left sidebar, go to APIs & Services > Credentials.

  4. Click "Create credentials" > "API key".

    • Copy the API Key shown — you'll use this in your code.

✅ 2. Custom Search Engine ID (cx)

🔧 Steps:

  1. Go to the Custom Search Engine (CSE) page.

  2. Click "Get Started".

  3. Enter a domain to search (e.g., www.google.com or leave it as *.com to search the whole web).

  4. Click "Create".

  5. After it's created, go to the Control Panel.

  6. Under "Search engine ID", you'll see your cx value — copy this.

🛠 Enable Image Search:

  1. In the Custom Search Engine settings (Control Panel):

  2. Go to "Basics" > Sites to search → make sure it’s set to “Search the entire web”.

  3. Go to "Image Search" tab (or advanced settings) and enable "Image Search".

  4. Save the changes.

✅ Final Setup in Code

js

const apiKey = "YOUR_API_KEY"; // from Google Cloud Console
const searchEngineId = "YOUR_SEARCH_ENGINE_ID"; // from Custom Search Engine

Then, you can use the code you shared to fetch an image based on a query.


🧪 Example

If you're searching for a "burger", the API might return:

json

{
  "items": [
    {
      "link": "https://upload.wikimedia.org/burger.jpg",
      ...
    }
  ]
}

This link can be used as the image source (<img src="..."/>).

Comments

Post a Comment

What is your thought about this?

Popular posts from this blog

Top Laravel Security Best Practices: How to Secure Your Web Application 🚀

Image
Top Laravel Security Best Practices: How to Secure Your Web Application 🚀 Laravel is one of the most popular PHP frameworks for web application development, known for its elegant syntax and robust features. However, security is a critical concern when building applications that handle sensitive data. This guide outlines essential security best practices to protect your Laravel application from vulnerabilities such as SQL injection, XSS, CSRF, and other threats. 1. Authentication & Authorization Laravel provides built-in authentication systems that make user authentication easy and secure. Use Laravel Breeze or Jetstream for authentication instead of building it from scratch. Implement Role-Based Access Control (RBAC) to manage permissions effectively. Enforce Multi-Factor Authentication (MFA) where necessary to add an extra layer of security. 2. Prevent SQL Injection SQL injection is a serious threat, but Laravel’s Eloquent ORM and Query Builder help prevent it...
Read more

Restoring Your Data in Xampp: A Step-by-Step Guide

Image
Restoring your data can feel overwhelming, but it doesn’t have to be. This guide will walk you through the exact steps needed to restore a MySQL or MariaDB data folder safely using a backup. Whether you're fixing a database crash or migrating to a new server, following these instructions will keep your data intact and your applications running smoothly. Data Restoration Workflow 🛡️ Preparation is Key Before you begin, it’s crucial to back up your existing "data" folder . This ensures you can revert to the original state if anything goes wrong. ✅ Step 1: Back up your current data folder Navigate to the xampp/mysql  path Right-click it → Copy → Paste in the same directory. Rename the copied folder to something like data_copy or data_backup . ✅ Step 2: Rename the backup folder Find the folder named backup (this contains your restored data). Right-click it →  Copy  →  Paste  in the same directory. Rename it to data . 🔄 Restoration Process ...
Read more

Passing array from child to parent component

 To pass the assigned_users array from a child component to its parent component, you need to follow these steps: Create a callback function in the parent component : This function will be responsible for receiving the assigned_users array. Pass the callback function to the child component as a prop : The child component can then call this function when it wants to send the assigned_users array to the parent. Call the callback function from the child component : Inside the child component, when you want to send the data to the parent (e.g., after updating assigned_users ), you call the callback function with the updated array. Parent Component jsx Copy code import React , { useState } from 'react' ; import ChildComponent from './ChildComponent' ; const ParentComponent = ( ) => { const [assignedUsers, setAssignedUsers] = useState ([]); // Callback function to update the parent state const handleAssignedUsersChange = ( users ) => { setAssig...
Read more