vite rollup css background-img with reactive url image missing

Question

I have a vue3-vite project with a background missing issue

There is my vue project directory tree:

src/assert/pic1.png

src/components/pages/Page1/Page1.vue

I use a css background-img tag in Page1.vue : background-image: url("src/assert/pic1.png")

This setting in dev env it's worked, the request url is http://.../src/assert/pic1.png

But in test env the request url turn to http://.../src/assets/src/assert/pic1.png

I think maybe is sth wrong in roll up setting, but I don't know how to fix it...

silic0n · Answer

Import pic path as backgroundUrl variable import backgroundUrl from "~/assert/pic1.png"
Set as variable in 'script' tag const backgroundStyle = `background-image:url(${backgroundUrl})`
In target document element set reactive style

Joe105598055 · Answer

Add resolve.alias in vite.config by following.

vite.config.js

import path from "path";

// ...
resolve: {
  alias: {
    "@": path.resolve(__dirname, "./src")
  }
}

Page1.vue

background-image: url("@/assert/pic1.png")