CODEWITHSUNDEEP
webfrontendsveltekit
pudisss
pudisss

Reputation: 11

Not found: /products/$lib/assets/images/phone2.svg in sveltekit

So I'm just working with an ecom website with products.

So I created a product list row which will show all of the product and then if the user clicks any of the products it will redirect to the product page which will fetch the specific product information from an api endpoint create in the project (sveltekit) and then I fetch in the +page.ts file of mine and then I export the data as the code below and then I extract the info out. So when I use an image I just put the products.src to it. The products.src looks like this "$lib/assets/images/phone1.svg" but the it log out the error is says

Not found: /products/$lib/assets/images/phone2.svg

I just wanna know where does the /products/ came from when the products.src is "$lib/assets/images/phone1.svg" which I have checked by console it out already

<script>
    // Get data
    export let data;
    const { products } = data;
</script>

<section class="product-page">
    <div class="product-image">
      <img src={products.src}>
    </div>
</section>

I just wanna expect the answer for it plssss.

Upvotes: 1

Views: 758

Answers (1)

brunnerh
brunnerh

Reputation: 185210

$lib is an alias for a directory that can only be used statically e.g. in import statements not as part of a dynamic source string.

You can put static asset files in the static directory at the root of the project and reference them directly, e.g. for the file:

/static/images/img.svg

The src path would be

/images/img.svg

Assets that are not in static have to imported or referenced in CSS so they are included in the build. E.g.

<script>
    import img from '$lib/images/img.svg';
</script>

<img src={img} />

Upvotes: 2

Related Questions