img tag is working locally but not in preview environment in Svelte [duplicate]

First time using Svelte and I'm just using a simple img tag seen below:

<img src="src/lib/assets/todo_list.png" alt="todo list"/>

When I run npm run dev, it shows up locally fine in browser. When I run npm run build and then npm run preview. The preview environment can't find the image.

[

What am I missing? Below is the folder directory.

Solutions tried:

1. Creating my own public/static/ directory and putting the image there

2. importing seen below, the image will appear for one brief second and then the rest of my site would go blank.

   import userSrc from '$lib/assets/todo_list.png';<img class="mx-auto h-screen" src={userSrc} alt="BONSAI"/>

3. I have tried changing the src to:

   src="src/lib/assets/todo_list.png"

   src="./lib/assets/todo_list.png"

   src="/lib/assets/todo_list.png"

   src="lib/assets/todo_list.png"

   src="./assets/todo_list.png"

   src="/assets/todo_list.png"

   src="assets/todo_list.png"

   src="./todo_list.png"

   src="/todo_list.png"

   src="todo_list.png"