Feature request: add config option to control background color in progressiveLoader

[dschreij]

When using sharp as the service for creating placeholder images, the backgrounds of transparent PNGs are set to black. This looks really weird if a website has a white background (like a retreating oil spill or something). Sharp offers a way to set the background color of the converted image, but this setting is not accessible from the settings offered by vuetify-loader. You can for instance configure the converted image to have a white background with:

sharpImg.flatten({ background: { r: 255, g: 255, b: 255 } })

Similar to what can be done with the configurable size parameter, is it possible to add for instance a bgcolor or background parameter that can be added as

sharpImg.flatten({ background: config.background})

or even

sharpImg.flatten(config.background)

for more granular control?

And a small related question: Can the degree of blur that is applied to the background be controlled as well?

[KaelWD]

Can the degree of blur that is applied to the background be controlled

It's set by the $img-preload-filter sass variable

[dschreij]

Thanks for the pointer @KaelWD. Is this variable documented anywhere? I tried looking it up in https://vuetifyjs.com/en/api/vuetify/#functions to see what the accepted values are but couldn't find it listed there. I assume it's just a number that indicates the blur radius?

[dschreij]

Nevermind, found it! https://vuetifyjs.com/en/api/v-img/#sass

It doesn't seem to work though. To test if my changes are honored, I tried setting

$img-preload-filter: blur(0) !default;

In my variables.scss file, but the placeholder images are still blurred. I understand that this is out of scope for this issue, so I have moved this question to Vuetify's discord group.