How to disable background-image url shortened

[igolkotek]

Hi,

Try to use the tool in astro js project.
Bumped into unexpected feature, making from

/* original */
   background-image: url(img/banner.jpg);

/* result */
    background-image: url("pk4sSq");

I couldn't find anything in the docs about.

How could I disable this feature in config?
Thanks a lot

[LucianoCassarini]

It's something strange, I would tell you that:

1. Import the image directly into your component

 // In your component:
import backgroundUrl from "../assets/images/header-startseite.webp";

// ...

<style define:vars={{ backgroundUrl }}>
  .header {
    background-image: var(--backgroundUrl);
  }
</style>

2. Place your background images in the public folder and reference them using an absolute path

// In your component:
let backgroundUrl = 'url(/images/header-startseite.webp)'; // Assuming the images are in public/images/

// ...

<style define:vars={{ backgroundUrl }}>
  .header {
    background-image: var(--backgroundUrl);
  }
</style>

[igolkotek]

Thank you, @LucianoCassarini ,

The #1 is just a workaround , but suitable, thank you.
Concerning #2. My resources are in public directory and I tried both relative and absolute paths.

imo this astro-style approach is a clear madness as we have a simple css situation. And I can't understand the reason to create such difficulties )

Anyway, thank you!

[devongovett]

This indicates that you're using the analyzeDependencies option, which replaces dependencies with a placeholder. If you don't need that then you should disable that option.

[LucianoCassarini]

You can try disabling analyzeDependencies from your CLI by entering the command

astro dev --no-analyze-dependencies

or by modifying the astro.config.mjs file,

export default {
  analyzeDependencies: {
    // Other configuration options...
    enabled: false,
    // Other configuration options...
  },
};

[igolkotek]

OK, thank you