Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update FAQ to include section about inline asset URLs #898

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

JorensM
Copy link

@JorensM JorensM commented May 6, 2024

As per this issue: #863 , this PR updates the FAQ section to include information on how to go about using inline URLs.

Update FAQ to include a section about inline asset URLs, as discussed in the following issue: sveltejs#863
Fix some text not showing
Add an example to the inline assets section
Fix spacing between beginnings of parenthesis
Comment on lines +241 to +249
### How do I manually specify an `<img/>` `src`, or any other asset, with an inline URL?

Currently, Svelte does not support inline asset URLs, you can only specify it via an imported asset, meaning that the following won't work:

```
<img src="./assets/inline/url/to/asset.png" />
```

2 recommended solutions are to use either [sveltejs/enhanced-img](https://kit.svelte.dev/docs/images#sveltejs-enhanced-img) (only for image elements) or [svelte-preprocess-import-assets](https://www.npmjs.com/package/svelte-preprocess-import-assets) (for all asset URLs).
Copy link
Member

@dominikg dominikg May 6, 2024

Choose a reason for hiding this comment

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

inline URL could be a bit confusing, the problem is really about referencing local paths and resolving them with an asset url. Suggestion (doesn't work as code suggestion due to the embedded code block):

How can I use relative paths for asset references in svelte components like <img src="./asset.png">

This is not supported out of the box. To resolve assets, you have to either import them like this:

<script>
import assetUrl from './asset.png';
</script>
<img src={assetUrl}>

or use a separate tool to add this functionality.
The 2 recommended solutions are sveltejs/enhanced-img (only for image elements) and svelte-preprocess-import-assets (for all asset URLs).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants