how to use images properly

[kkerti]

Hi,
I can't get my head around using images in <img src="/assets/imgs/.."/> properly. It works in dev, but the built electron app has no images. During electron-vite build the images aren't copied to dist. I think I'm missing some config, but after reading the docs I'm still clueless.

Here is my folder structure and the current renderer config.

Any help would be appreciated. Thanks.

renderer: {
    plugins: [
      svelte({
        preprocess: [
          preprocess({
            postcss: true,
          })
        ]
      }), 
      monacoEditorPlugin([])
    ],
    build: {
      rollupOptions: {
        input: {
          index: resolve(__dirname, 'src/renderer/index.html'),
        }
      },
      outDir: '../../dist/renderer',
    },
    resolve: {
      alias: {
        '$lib': path.resolve('src/renderer/lib'),
      },
    },
    target: 'chrome104'
  }   

[alex8088]

use assets via importing, for example:

import icon from './assets/icons.svg'
<img src="{icon}"/>

[kkerti]

Thanks alex. Does a dynamic import work in this case as well?

[alex8088]

Thanks alex. Does a dynamic import work in this case as well?

yes

[kkerti]

thank you alex!

[kkerti]

@alex8088
Using the following function, development works, but prod build does not get the images.

function getImgUrl(img){
    const imgPath = new URL(`/assets/imgs/sm_${img}.jpg`).href
    console.log('img', img, imgPath)
    return imgPath
  }

Any ideas?

[alex8088]

@alex8088 Using the following function, development works, but prod build does not get the images.

function getImgUrl(img){
    const imgPath = new URL(`/assets/imgs/sm_${img}.jpg`).href
    console.log('img', img, imgPath)
    return imgPath
  }

Any ideas?

pass import.meta.url to URL as a second arg.

You can learn more from vite's static assets handling section.