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

Merged
merged 5 commits into from
Jul 9, 2024

Conversation

JorensM
Copy link
Contributor

@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.

docs/faq.md Outdated
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).

JorensM and others added 5 commits July 9, 2024 16:40
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
@dominikg
Copy link
Member

dominikg commented Jul 9, 2024

@JorensM i have rebased this PR and applied my suggestion above, please let me know if this covers it well

@JorensM
Copy link
Contributor Author

JorensM commented Jul 9, 2024

@JorensM i have rebased this PR and applied my suggestion above, please let me know if this covers it well

Looks good 👍 thank you!

@dominikg dominikg merged commit 0d093f2 into sveltejs:main Jul 9, 2024
6 checks passed
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.

2 participants