Override global Vite config assetsInlineLimit for individual file

Question

Background

My project have a vite.config.ts that is not allow to change is set with assetsInlineLimit: 0.

I am trying to make an image to be in base64 so that it is still able to show for no network scene (eg: Image for network error page).

I have tried import image from "path/image.png?inline", but unfortunately, it does not work.

Current Workaround

The approach I am using now is using external library to convert the image to base64 and use it in the <image> tag.

Question

Is there a way for individual file to override the Vite global assetsInlineLimit config and leverage on path/image.png?inline?

Answer 1

https://vitejs.dev/config/build-options#build-assetsinlinelimit accepts a function too, where you can override the behaviour based on filepath.

Type: number | ((filePath: string, content: Buffer) => boolean | undefined)

If a callback is passed, a boolean can be returned to opt-in or opt-out. If nothing is returned the default logic applies.

Something like this maybe?

assetsInlineLimit: (filePath) => {
  return filePath.includes("path/image.png?inline");
},