mirror of
https://github.com/wasp-lang/wasp.git
synced 2024-11-29 12:53:32 +03:00
69 lines
2.1 KiB
Markdown
69 lines
2.1 KiB
Markdown
---
|
|
title: Static Asset Handling
|
|
---
|
|
|
|
import { ShowForJs, ShowForTs } from '@site/src/components/TsJsHelpers'
|
|
|
|
## Importing Asset as URL
|
|
|
|
Importing a static asset (e.g. an image) will return its URL. For example:
|
|
|
|
<Tabs groupId="js-ts">
|
|
<TabItem value="js" label="JavaScript">
|
|
|
|
```jsx title="src/client/App.jsx"
|
|
import imgUrl from './img.png'
|
|
|
|
function App() {
|
|
return <img src={imgUrl} alt="img" />
|
|
}
|
|
```
|
|
</TabItem>
|
|
<TabItem value="ts" label="TypeScript">
|
|
|
|
```jsx title="src/client/App.tsx"
|
|
import imgUrl from './img.png'
|
|
|
|
function App() {
|
|
return <img src={imgUrl} alt="img" />
|
|
}
|
|
```
|
|
</TabItem>
|
|
</Tabs>
|
|
|
|
For example, `imgUrl` will be `/img.png` during development, and become `/assets/img.2d8efhg.png` in the production build.
|
|
|
|
This is what you want to use most of the time, as it ensures that the asset file exists and is included in the bundle.
|
|
|
|
We are using Vite under the hood, read more about importing static assets in Vite's [docs](https://vitejs.dev/guide/assets.html#importing-asset-as-url).
|
|
|
|
## The `public` Directory
|
|
|
|
If you have assets that are:
|
|
|
|
- Never referenced in source code (e.g. robots.txt)
|
|
- Must retain the exact same file name (without hashing)
|
|
- ...or you simply don't want to have to import an asset first just to get its URL
|
|
|
|
Then you can place the asset in a special `public` directory in the `client` folder:
|
|
|
|
```
|
|
src
|
|
└── client
|
|
├── public
|
|
│ ├── favicon.ico
|
|
│ └── robots.txt
|
|
└── ...
|
|
```
|
|
|
|
Assets in this directory will be served at root path `/` during dev, and copied to the root of the dist directory as-is.
|
|
|
|
For example, if you have a file `favicon.ico` in the `public` directory, and your app is hosted at `https://myapp.com`, it will be made available at `https://myapp.com/favicon.ico`.
|
|
|
|
:::info Usage in client code
|
|
Note that:
|
|
|
|
- You should always reference public assets using root absolute path - for example, `src/client/public/icon.png` should be referenced in source code as `/icon.png`.
|
|
- Assets in the `public` directory **cannot be imported** from <ShowForJs>JavaScript</ShowForJs><ShowForTs>TypeScript</ShowForTs>.
|
|
:::
|