What is a best practice including assets?

[dbwodlf3]

If yours component have some static asset (like svg background img, etc...) then how do you load that images?
When i developing i use just static url, but in production use cdn url. (ex: img src="/static/asset1.svg")
It is trivial but it annoy me.

What is best practice? just base64 encoding? '-'..

[e111077]

This is a fundamental issue on the web in general that is often solved with build tooling, but with Lit I think it boils down to what you're building. Are you building a component that is:

• reusable across different situations (e.g. shared on NPM)
• specific to your app

Reusable element meant to be distributed

In this case, depending on the situation you can always ask the user to input the location of the resource e.g. if you're making a <lazy-svg> element you can ask for a src <lazy-svg src="user-inputted/location.svg">.

If you're shipping an asset that is not configurable in your package you can use new URL('./local/asset/location.png', import.meta.url) which many build tools can understand and then use that url to bind to the <img>. This works in the browser, but here is an article on a rollup plugin developed by Open-WC to address this in rollup. e.g.

const assetUrl = new URL('./local/asset/location.png', import.meta.url);

class MyEl extends LitElement {
  render() {
    return html`
      <img src=${assetUrl.href}>
    `;
  }
}

Finally there is also base64 as you suggested.

Specific to your app

If this is the case, the most common solution here is to just link to the file directly since you will have control over routing, file system, and asset locations.

[garranplum]

Developing for Lit with Vite has been awesome for many reasons ... and it supports static imports out-of-the-box.

Here's a snippet from my code that sets up an images object and populates it with static imports:

// Setup for Image Constants
export let images: { [key: string]: any }

import towerLogo from 'app/images/logo/tower-logo.png'
images = { ...images, towerLogo }

import castle from 'app/images/promo/castle.jpg'
images = { ...images, castle }

import orclandia from 'app/images/promo/orclandia.jpg'
images = { ...images, orclandia }

Then, in a component, I can write:

background-image: url(${rumble.images.castle});

When Vite builds the site for production, these are replaced with the correct relative URLs for your deployment location.

Here's the documentation on static assets with Vite:
https://vitejs.dev/guide/assets.html

Finally, here's a Lit Starter Kit that's already setup w/ Vite. You can drop it in a directory and play with it:
https://github.com/garranplum/lit-starter

Enjoy!