Skip to content

Commit

Permalink
docs: native asset module reference style (#1358)
Browse files Browse the repository at this point in the history
  • Loading branch information
ashwanth1109 authored Oct 18, 2020
1 parent b56d53b commit 1b7c10c
Showing 1 changed file with 15 additions and 0 deletions.
15 changes: 15 additions & 0 deletions docs/04-features.md
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,19 @@ Snowpack supports CSS Modules using the `[name].module.css` naming convention. C

### Import Images & Other Assets

```jsx
const img = new URL('./image.png', import.meta.url); // img === '/src/image.png'
const svg = new URL('./image.svg', import.meta.url); // svg === '/src/image.svg'

/**
* This example uses JSX, but you can create url objects with any framework
* and provide these as your asset reference to your img tag
*/
<img src={img.href} />
```
Snowpack supports the usage of URL class for asset references which doesn't overload the import keyword. This is the recommended way since it is the native asset module reference style.
```jsx
import img from './image.png'; // img === '/src/image.png'
import svg from './image.svg'; // svg === '/src/image.svg'
Expand All @@ -80,6 +93,8 @@ import svg from './image.svg'; // svg === '/src/image.svg'
<img src={img} />;
```
Alternatively, you can import images and reference your assets in the more traditional way.
All other assets not explicitly mentioned above can be imported and will return a URL reference to the final built asset. This can be useful for referencing non-JS assets by URL, like creating an image element with a `src` attribute pointing to that image.
## Features
Expand Down

1 comment on commit 1b7c10c

@vercel
Copy link

@vercel vercel bot commented on 1b7c10c Oct 18, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.