CODEWITHSUNDEEP
csssveltesveltekit
Trav
Trav

Reputation: 147

img tag is working locally but not in preview environment in Svelte

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.

[can't find image1

What am I missing? Below is the folder directory. 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"

Upvotes: 0

Views: 18

Answers (0)

Related Questions