Update image file links

Author: exrlla

projects/create-a-doodle-gallery/create-a-doodle-gallery.mdx

@@ -27,7 +27,7 @@ I miss the days of the internet when people built cool stuff for the sake of mak
 
 Here's a project tutorial that might help bring us back to these days - you'll be building a website where anyone can draw a doodle for a public virtual museum exhibit! 
 
-![Doodle gallery](./images/ezgif-509d613e7e5e8ca6.gif)
+<ImageZoom src="https://raw.githubusercontent.com/codedex-io/projects/main/projects/create-a-doodle-gallery/images/ezgif-509d613e7e5e8ca6.gif" alt="Doodle gallery" />
 
 To make this project, we'll be using the classic web dev tools HTML, CSS, and JavaScript, and will be storing our drawings in [Supabase](http://supabase.com/). 
 
@@ -71,7 +71,7 @@ We need to add API keys to our project for it to connect to our storage bucket -
 
 Go to the API menu under Project Settings. Find your Project URL and API key. They should look something like this:
 
-![API keys](./images/key-url-example.png)
+<ImageZoom src="https://raw.githubusercontent.com/codedex-io/projects/main/projects/create-a-doodle-gallery/images/key-url-example.png" alt="API keys" />
 
 ### Clone Template
 
@@ -111,15 +111,15 @@ npm create vite@latest
 
 Then, answer the prompts as follows. You can name your project however you like. When prompted, pick `Vanilla` as your framework and `JavaScript` as your variant. Your terminal should look like this at the end of completing the steps:
 
-![Vite setup](./images/vite-setup.png)
+<ImageZoom src="https://raw.githubusercontent.com/codedex-io/projects/main/projects/create-a-doodle-gallery/images/vite-setup.png" alt="Vite setup" />
 
 This might look different depending on what kind of computer you're using — in my case, I'm on a Macbook. If you're struggling with Vite, you can check out our [Vite project tutorial](https://www.codedex.io/projects/create-a-react-app-with-vite)!
 
 ### Running your server
 
 To start up a server with your webpage running, type `npm run dev` in the Terminal. It'll give you a URL that looks something like: `http://localhost:3000/` - but the numbers in the URL can vary. Copy the link and paste it in your browser, and you should see something like this:
 
-![](./images/vite-startup-template-screen.png)
+<ImageZoom src="https://raw.githubusercontent.com/codedex-io/projects/main/projects/create-a-doodle-gallery/images/vite-startup-template-screen.png" alt="Vite startup template screen" />
 
 ### .env file and API keys
 
@@ -383,7 +383,7 @@ We want our big gallery to load random drawings, so everyone's drawings have a s
 
 Then we're going to add our batch of drawings to our marquee. If you don't know what a marquee is, it's a scrolling gallery, or set of text that seems to scroll infinitely!
 
-![Marquee example](./images/webflow-marquee-example.gif)
+<ImageZoom src="https://raw.githubusercontent.com/codedex-io/projects/main/projects/create-a-doodle-gallery/images/webflow-marquee-example.gif" alt="Marquee example" />
 
 We'll write out our function header for `repeatMarquee()`, limiting the number of drawings picked to 200. Our marquee has two rows, and if neither of them render, it'll stop the function through the `if` statement.