Tauri + Svelte - Static images disappear after build (Windows) | Tauri Apps | Page 1

hardy violet Jan 5, 2023, 11:08 AM

#

Hi,
I am testing Tauri with Svelte and I have one static image for background, which shows and works well on dev but when I build it and run the app .exe it doesn't show up. The image is in the public folder that is on root of the project, which is a best practice for Svelte.

The image is referenced like that:
<img src="public/poster.jpg" alt="">

What am I missing? Do I need to add some references to the public folder? Or maybe place the images in some other place?

#

Btw I have setup the project with Vite by just running npm create tauri-app based on official guide in the website.

cinder dune Jan 5, 2023, 11:22 AM

#

Can you try a debug build? npm run tauri build -- --debug (output in target/debug/).
Then you can check the terminal for resolver errors, and the devtools console too

hardy violet Jan 5, 2023, 11:35 AM

#

I just tried it and the terminal posted this message:
Asset `public/poster.jpg` not found; fallback to public/poster.jpg.html Asset `public/poster.jpg` not found; fallback to public/poster.jpg/index.html Asset `public/poster.jpg` not found; fallback to index.html

#

Nothing was posted on the devtools console. 🙂

#

It does seem that it cannot find the image, but I am not sure if it's because of bad path reference or that it hasn't been packaged in the build.

#

As I said it works perfectly with "npm run tauri dev" and there aren't any errors and such.

cinder dune Jan 5, 2023, 11:42 AM

#

can you check if vite copied the files into the dist folder?

hardy violet Jan 5, 2023, 11:42 AM

#

Yes:

#

It does seem that the files were copied there.

cinder dune Jan 5, 2023, 11:43 AM

#

hmm, maybe tauri is case-sensitive 🤔

hardy violet Jan 5, 2023, 11:43 AM

#

Ooh, interesting.

cinder dune Jan 5, 2023, 11:43 AM

#

or try /public/poster.jpg (note the leading /) that sometimes is a problem too iirc

hardy violet Jan 5, 2023, 11:47 AM

#

I tried both and it doesn't work. 😦

#

This is how the tauri.config.json looks like, maybe I have to reference the public folder there somewhere?

  "build": {
    "beforeDevCommand": "npm run dev",
    "beforeBuildCommand": "npm run build",
    "devPath": "http://localhost:1420",
    "distDir": "../dist",
    "withGlobalTauri": false
  },
  "package": {
    "productName": "ip",
    "version": "0.0.0"
  },
  "tauri": {
    "allowlist": {
      "all": false,
      "shell": {
        "all": false,
        "open": true
      }
    },
    "bundle": {
      "active": true,
      "category": "DeveloperTool",
      "copyright": "",
      "deb": {
        "depends": []
      },
      "externalBin": [],
      "icon": [
        "icons/32x32.png",
        "icons/128x128.png",
        "icons/[email protected]",
        "icons/icon.icns",
        "icons/icon.ico"
      ],
      "identifier": "com.jets.dev",
      "longDescription": "",
      "macOS": {
        "entitlements": null,
        "exceptionDomain": "",
        "frameworks": [],
        "providerShortName": null,
        "signingIdentity": null
      },
      "resources": [],
      "shortDescription": "",
      "targets": "all",
      "windows": {
        "certificateThumbprint": null,
        "digestAlgorithm": "sha256",
        "timestampUrl": ""
      }
    },
    "security": {
      "csp": null
    },
    "updater": {
      "active": false
    },
    "windows": [
      {
        "fullscreen": false,
        "height": 1080,
        "resizable": true,
        "title": "ip",
        "width": 1920
      }
    ]
  }
}```

atomic sluice Jan 6, 2023, 7:22 AM

#

@hardy violet Just remove the public from the path and use /poster.jpg

hardy violet Jan 6, 2023, 10:04 AM

#

Hi @atomic sluice, thanks for the suggestion. It didn't work. 😦 But what I found out is that, importing the image and assign it to a variable/url (per this Vite guide - https://vitejs.dev/guide/assets.html) gets the image packaged into the build. And that potentially means it's a Vite/Svelte related issue, not Tauri on it's own. I will go to their Discord and ask them for a workaround as I really don't like doing imports like that. Thanks for the help @atomic sluice @cinder dune!

#

There is this tidbit from the guide which is interesting -

atomic sluice Jan 6, 2023, 10:05 AM

#

@hardy violet good to know, I use static assets with svelte and it works with /path

hardy violet Jan 6, 2023, 10:05 AM

#

But are you using Vite?

atomic sluice Jan 6, 2023, 10:05 AM

#

Yes

hardy violet Jan 6, 2023, 10:06 AM

#

Could you show me a rough folder structure of your project?

thorny mason Jan 6, 2023, 10:08 AM

#

hardy violet Jan 6, 2023, 10:08 AM

#

Thanks! Yeah, it is identical.

thorny mason Jan 6, 2023, 10:08 AM

#

And in my code: ```<script lange="ts">
</script>

#

It may be related to vite config

hardy violet Jan 6, 2023, 10:09 AM

#

How does your vite.config.json looks like?

#

This is mine.

#

#

That's just the default one that is being generated, haven't done any changes to it.

thorny mason Jan 6, 2023, 10:10 AM

#

import { defineConfig, configDefaults } from 'vitest/config';
import type { Plugin } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import Icons from 'unplugin-icons/vite';
import { join } from 'path';
import { FileSystemIconLoader } from 'unplugin-icons/loaders';
import { visualizer } from 'rollup-plugin-visualizer';

const srcRoot = join(__dirname, 'src');
const isMac = process.platform === 'darwin';

// https://vitejs.dev/config/
export default defineConfig({
  define: {
    'import.meta.vitest': 'undefined',
    isMac,
  },
  test: {
    environment: 'happy-dom',
    includeSource: ['src/**/*.{js,ts}'],
    exclude: [...configDefaults.exclude, 'tests/*', 'tests-examples/*'],
    setupFiles: 'setupTest.ts',
  },
  plugins: [
    svelte(),
    Icons({
      autoInstall: true,
      compiler: 'svelte',
      customCollections: {
        assets: FileSystemIconLoader('./src/assets/svg'),
      },
    }),
    visualizer() as unknown as Plugin,
  ],
  root: __dirname,
  resolve: {
    alias: [{ find: '@', replacement: srcRoot }],
  },
});```

#

I think I just use a default vite config now after seeing yours I can see improvement

hardy violet Jan 6, 2023, 10:12 AM

#

Improvement in regards to?

thorny mason Jan 6, 2023, 10:12 AM

#

envPrefix and some build options

#

can you try to just add the root value? it may be the root cause

hardy violet Jan 6, 2023, 10:15 AM

#

Yep, you mean the one at the bottom one right?

#

thorny mason Jan 6, 2023, 10:15 AM

#

yes

hardy violet Jan 6, 2023, 10:16 AM

#

On it!

#

It didn't work. I do get this message when building with just "/poster.jpg" ref.

#

#

import { svelte } from "@sveltejs/vite-plugin-svelte";
import { join } from 'path';

const srcRoot = join(__dirname, 'src');

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte()],

  // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
  // prevent vite from obscuring rust errors
  clearScreen: false,
  // tauri expects a fixed port, fail if that port is not available
  server: {
    port: 1420,
    strictPort: true,
  },
  // to make use of `TAURI_DEBUG` and other env variables
  // https://tauri.studio/v1/api/config#buildconfig.beforedevcommand
  envPrefix: ["VITE_", "TAURI_"],
  build: {
    // Tauri supports es2021
    target: process.env.TAURI_PLATFORM == "windows" ? "chrome105" : "safari13",
    // don't minify for debug builds
    minify: !process.env.TAURI_DEBUG ? "esbuild" : false,
    // produce sourcemaps for debug builds
    sourcemap: !!process.env.TAURI_DEBUG,
  },
  root: __dirname,
  resolve: {
    alias: [{ find: '@', replacement: srcRoot }],
  },
});```

#

Here is how the vite config is looking like now.

thorny mason Jan 6, 2023, 10:21 AM

#

yes you can't import it if it's in public directory

#

can you share you repo?

hardy violet Jan 6, 2023, 10:21 AM

#

One moment.

hardy violet Jan 6, 2023, 10:43 AM

#

I just sent a link to the repo to you on pm. 🙂

#Tauri + Svelte - Static images disappear after build (Windows)