"You didn't provide an API key. You need to provide your API key in an Authorization header using Bearer auth (i.e. Authorization: Bearer YOUR_KEY) [closed]

Question

I WANT TO CREATE AN AI IMAGE GENERATOR USING OPENAI HOW CAN I SOLVE THIS PROBLEM ??

const API_KEY = "KEY..."

const submitIcon = document.querySelector("#submit-icon")
const inputElement = document.querySelector("input")

const getImages = async () => {
    const options = {
        method : "POST",
        Headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${API_KEY}`,
        },
        body: JSON.stringify({
            
            "prompt": inputElement.value,
            "n":1,
            "size":"1024x1024"
        })
    }
    try{
       const response = await fetch(" https://api.openai.com/v1/images/generations ",options)
       const data = await response.json()
       console.log(data)
    
    } catch(error){
        console.error(error)
    }
}

submitIcon.addEventListener('click', getImages)

Answer 1

First Issue: The Authorization header should be enclosed in backticks (``)

Second Issue: Headers should be lowercase (headers)

And then your options should be looking something like this as for final output

const options = {
        method: "POST",
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${API_KEY}`,
        },
        body: JSON.stringify({
            "prompt": inputElement.value,
            "n": 1,
            "size": "1024x1024"
        })
    };