tauri-apps / tauri-apps/tauri-docs

[docs] sample project should demonstrate how to force images to be bundled with app

Open
#3,560 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
MDX
Stars
1.1k
Forks
887
Avg merge
2d 8h
Merged PRs (30d)
48

Description

Two years ago, a user asked this and got no answers. Their problem was easy to understand -- "hey, when I add an image to /src/assets, it appears in the dev server, but not in the compiled app. What gives?"

I went down several rabbit holes trying to solve the same problem in my own app. The sample app clearly shows that you can put files in /src/assets such as "tauri.svg" and they appear in the compiled android apk just fine, but when I added my own image and set it to appear when a button is pressed, it showed a broken image tile instead. What the hell? Are svgs "magic" somehow? Is there a secret config file that doesn't show up when I search for "svg" in the source code? What am I missing?

It turns out that the problem is that Tauri uses Vite for bundling, and Vite is smart and doesn't bundle any assets that don't appear in index.html. So my appearing png is getting excluded from the bundle, as Vite isn't clever enough to notice that I summon it later from JavaScript. My workaround was to include all my images in index.html and just have them be hidden until needed, but there's a more elegant solution: add the assets folder explicitly in the Vite bundler! After all, it's not like the user will ever put something in /src/assets that they don't want to be in their app, right? I think the sample project should demonstrate this, to save a ton of head banging later.

https://vite.dev/guide/build#multi-page-app

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the sample project and its Vite bundler configuration, comparing the existing /src/assets example with the compiled app behavior. Add a documented example showing how assets referenced later from JavaScript are included, then verify that the image is present and renders in a compiled app.

Written by the indexing model from the issue text.

Assessment

Tech stack
vite
Domain
build-system, documentation
Issue type
Documentation
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
62/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.