How to add assets images to extension?

[KolyStudio]

Hi, I'm trying to add images to the extension, but when I put them in the assets folder, nothing happens, they are not exported to the dist folder.

[NekitCorp]

Hello, it depends on where you want to use the image.

1. Use in popup/sidepanel/options

In this case, you can simply put the image next to the component and import it, for example:

import imgUrl from "./svelte.png";

...

<img src={imgUrl} width="150" height="150" alt="Svelte logo" />

2. Use in content script

In this case, you need to familiarize yourself with Manifest - Web Accessible Resources, for examaple:

Create public folder in root folder and put an image there. After that you can get a link to it using chrome.runtime.getURL:

chrome-extension-svelte-typescript-boilerplate/
├─ node_modules/
├─ src/
├─ public/
│  ├─ svelte.png   <--- put image there
├─ package.json
├─ README.md

const imgUrl = chrome.runtime.getURL("/svelte.png");

...

<img src={imgUrl} width="150" height="150" alt="Svelte logo" />

[KolyStudio]

When i do npm run build, images are not added to release folder