compress images and use in browser.runtime.getURL method

[honwhy]

I am using wxt + Vue + typescript, In my option page components, import images like this,

const login1 = ref(browser.runtime.getURL('/images/login1.gif'))

since login1.gif is stored in <rootDir>/public/images/login1.gif, wxt just copy it to the .output result

What I wish to have, before wxt serve or build the extension, it compress the images first, and I can import the compressed version, just like

const login1 = ref(browser.runtime.getURL('/images/login1_compressed.gif'))

of cause, those images willing to be compressed should be put in the specify directory other than <rootDir>/public .
Also be careful of the typescript declaration collected and defined by .wxt/types/paths.d.ts, shall includes the compressed one ?

[aklinker1]

You can import the image as an asset instead of using the public directory. Then you can use a vite plugin to compress images.

import login1 from '~/assets/login1.gif';

<img :src="login1" />

https://wxt.dev/guide/assets.html#assets-directory

This will only work for HTML pages inside an extension. If you try to use this approach for content scripts, the file will attempt to be loaded from the website you're on, not the extension, since in production it's loaded as an absolute path without a hostname, like /assets/login1-[hash].gif. So if you're on google.com, the asset would be loaded from https://google.com/assets/login1-[hash].svg. You said this was for the options page, so this shouldn't be a problem for you, but something to keep in mind.