background-image does not work with public images in style with lang set to scss

[poengAlex]

What happened?

This will work in development but not when building for production

<template>
	<q-page class="q-pa-md">
		<div class="image-test"></div>
	</q-page>
</template>

<script setup lang="ts">
</script>

<style lang="scss" scoped>
.image-test {
	width: 100%;
	height: 200px;
	background-image: url('test.png'); //image located in public folder
	background-size: cover;
	background-position: right center;
	background-repeat: no-repeat;
}
</style>

What did you expect to happen?

The image should be a part of the assets after the build. NB! When adding background-image: url('test.png'); as a inline style it does work.

Reproduction URL

https://codepen.io/poengAlex/pen/abgxYwO

How to reproduce?

1. Use sample code
2. Add test.png in the public folder
3. Build it
4. Serve the code
5. Image is not available

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite), SPA Mode

Platforms/Browsers

Firefox, Chrome, Safari

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[rstoenescu]

Hi,

You are requesting features that are supplied by your dev setup (Webpack/Vite/etc). Those have nothing to do with Quasar itself.

However, if you wish to make your code work, then it matters wether you're using vue-router and with which mode (hash or history). And if you are using a public path. Remember that specifying url('test.png') means the browser will request <current_path>/test.png. Furthermore, if you are using vue router & its history mode, it matters if you also have configured your webserver for it correctly. If you still need help, please head to our https://forum.quasar.dev