Need help understanding what's going wrong with Wanderlust project

I’m on the last step of the wanderlust project. I can’t get the venue photos to display. It keeps saying I make a bad request in the console, but it gives me the photo url. When I try to reload the photo on the page, it gives me another bad request error in the console. I can’t figure out where I’m making a bad request.

I’ve been stuck on this for almost a week and I’m ready to tear what little hair I have left out of my head. Can anyone help?

main.js:

// Foursquare API Info
const clientId = '3CNNCJVG3JIGAY5YPG0LYMYNGFOI4BGYGEJPW1VOUOPXQGLR';
const clientSecret = 'ZYFFGT4MBOHLNLXK2PRZKYIVEKXZN0KO0I44S53EHO21FV3Q';
const url = 'https://api.foursquare.com/v2/venues/explore?near=';
const picUrl = `https://api.foursquare.com/v2/venues/`

// OpenWeather Info
const openWeatherKey = 'a0902d8905b34148cc050f75627198e9';
const weatherUrl = 'https://api.openweathermap.org/data/2.5/weather?';

// Page Elements
const $input = $('#city');
const $submit = $('#button');
const $destination = $('#destination');
const $container = $('.container');
const $venueDivs = [$("#venue1"), $("#venue2"), $("#venue3"), $("#venue4"), $("#venue5")];
const $venueDivsTest = [$("#venue1")]; //see comment for renderVenuesTest
const $weatherDiv = $("#weather1");
const weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

// Add AJAX functions here:
const getVenues = async () => {
  const city = $input.val();
  const urlToFetch = `${url}${city}&limit=10&client_id=${clientId}&client_secret=${clientSecret}&v=20210613`;
  try{
    const response = await fetch(urlToFetch);
    if (response.ok){
      // console.log(response);
      const jsonResponse = await response.json();
      // console.log(jsonResponse);
      const venues = jsonResponse.response.groups[0].items.map(obj => obj.venue);
      console.log(venues);
      return venues;
    }
  }catch(error){
    console.log(error);
  }
  
}

const getVenuePhoto = async (venue) => {
  const urlToFetchForPhoto = `${picUrl}/${venue.id}/photos?client_id=${clientId}&client_secret=${clientSecret}&v=20210620`
  console.log(`this is the url being fetched in getVenuePhoto:`)
  console.log(urlToFetchForPhoto);
  try{
    const response = await fetch(urlToFetchForPhoto);
    if (response.ok){
      console.log(`this is the response from that fetch:`)
      console.log(response);
      const jsonResponse = await response.json();
      console.log(`jsonresponse in getVenuePhoto`);
      console.log(jsonResponse);
      console.log(`${jsonResponse.response.photos.items[0].prefix}original${jsonResponse.response.photos.items[0].suffix}`);
      imgSrc = `${jsonResponse.response.photos.items[0].prefix}original${jsonResponse.response.photos.items[0].suffix}`
      console.log(`this is logging imgSrc`)
      console.log(imgSrc);
      return imgSrc;
      }
    }
    catch(error){
    console.log(error);
  }
}

const getForecast = async () => {
  const city = $input.val();
  const urlToFetch = `${weatherUrl}q=${city}&APPID=${openWeatherKey}`
  try{ 
    const response = await fetch(urlToFetch);
    if (response.ok){
      const jsonResponse = await response.json();
      console.log(jsonResponse);
      return jsonResponse;
    }
  }catch(error){

  }
}


// Render functions

//this is a modififed version of renderVenues so that i can test the premium API call in getVenuePhoto without making 10 calls, as the calls are limited by day
const renderVenuesTest = (venues) => {
  $venueDivsTest.forEach(($venue/*, index*/) => {
    //this part just makes sure the venues rendered are random and not duplicates
    const venue = venues[0];
    console.log(venue);
    const venueIcon = venue.categories[0].icon;
    const venueIconSrc = getVenuePhoto(venue);
    let venueContent = createVenueHTML(venue.name, venue.location, venueIconSrc/*, getVenueImg(venue)*/);
    $venue.append(venueContent);
  });
  $destination.append(`<h2>${venues[0].location.city}</h2>`);
}

const renderVenues = (venues) => {
  let addedVenue = [];
  $venueDivs.forEach(($venue/*, index*/) => {
    //this part just makes sure the venues rendered are random and not duplicates
    let randomIndex = randomIndexMaker();
    // console.log(randomIndex);
    while (addedVenue.includes(venues[randomIndex])){
      randomIndex = randomIndexMaker();
      console.log(`${randomIndex} in loop`);
    }
    addedVenue.push(venues[randomIndex]);
    const venue = venues[randomIndex];
    console.log(venue);
    const venueIcon = venue.categories[0].icon;
    const venueIconSrc = `${venueIcon.prefix}bg_64${venueIcon.suffix}`;
    let venueContent = createVenueHTML(venue.name, venue.location, venueIconSrc/*, getVenueImg(venue)*/);
    $venue.append(venueContent);
  });
  $destination.append(`<h2>${venues[0].location.city}</h2>`);
}

const renderForecast = (day) => {
  // Add your code here:
  console.log(day);
  let dayOfWeekIThink = new Date(day.dt);
  let dayInt = dayOfWeekIThink.getDay();
  const {icon} = day.weather[0];
	let weatherContent = createWeatherHTML(day);
  $weatherDiv.append(weatherContent);
}

const executeSearch = () => {
  $venueDivs.forEach(venue => venue.empty());
  $weatherDiv.empty();
  $destination.empty();
  $container.css("visibility", "visible");
  getVenues()
    .then(venues => {
      return renderVenuesTest(venues);
    })
  getForecast()
    .then(forecast => {
      return renderForecast(forecast);
    })
  return false;
}

$submit.click(executeSearch)

helpers.js

const createVenueHTML = (name, location, iconSource, /*photoSrc*/) => {
  return `<h2>${name}</h2>
  <img class="venueimg" src="${iconSource}"/>
  <h3>Address:</h3>
  <p>${location.address}</p>
  <p>${location.city}</p>
  <p>${location.country}</p>`;
}

const createWeatherHTML = (currentDay) => {
  // console.log(currentDay)
  return `<h2>${weekDays[(new Date()).getDay()]}</h2>
		<h2>Temperature: ${kelvinToFahrenheit(currentDay.main.temp)}&deg;F</h2>
    <h2>Feels like: ${kelvinToFahrenheit(currentDay.main.feels_like)}&deg;F</h2>
    <h2>Wind speed: about ${Math.round(toImperialWindConverter(currentDay.wind.speed))} MPH</h2>
		<h2>Condition: ${currentDay.weather[0].description}</h2>
  	<img src="https://openweathermap.org/img/wn/${currentDay.weather[0].icon}@2x.png">`;
}

const kelvinToFahrenheit = k => ((k - 273.15) * 9 / 5 + 32).toFixed(0);

function randomIndexMaker(){
  return Math.floor(Math.random() * 10);
}

function toImperialWindConverter(nonFreedomUnits){
  let freedomUnits = nonFreedomUnits * 2.236936;
  return freedomUnits;
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Wanderlust</title>
    <link rel="stylesheet" type="text/css" href="public/reset.css" />
    <link rel="stylesheet" type="text/css" href="public/style.css" />
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro|Work+Sans" rel="stylesheet">
  </head>
  <body>
    <header>
      <img class="logo" src="https://content.codecademy.com/courses/intermediate-javascript-requests/wanderlust/logo.svg" alt="logo" />
    </header>
    <main>
      <h1>Where do you want to land?</h1>
      <form autocomplete="off">
        <input type="text" id="city">
        <button id="button" type="submit">Submit</button>
      </form>
    </main>
    <div class="container">
    <div id="destination">

    </div>
    <div class="sectiontitle">
      <h2>CURRENT WEATHER</h2>
    </div>
    <section id="weather">

        <div class="weather" id="weather1">

        </div>

    </section>
    <div class="sectiontitle">
      <h2>TOP ATTRACTIONS</h2>
    </div>
    <section id="venues">
      <div class="venue" id="venue1">

      </div>
      <div class="venue" id="venue2">

      </div>
      <div class="venue" id="venue3">

      </div>
      <div class="venue" id="venue4">

      </div>
      <div class="venue" id="venue5">

      </div>
    </section>
    <footer>
    </footer>

  </div>
    <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
    <script src="public/helpers.js"></script>
    <script src="public/main.js"></script>
  </body>
</html>