How can I change image preview background

[lelikflegma]

Hi. Currently, when I upload image, preview background-color is calculated and settled like average color of uploaded image. So, for original PNG, with transparent body I got :

I found in html this :

<span class="file-preview image-preview" style="background-color: rgb(80, 65, 250);">

When i comment style, i got this :

For remove gray backround i can override css property "background" in :

.vue-file-agent .file-category-video-playable .file-preview .file-preview-overlay, .vue-file-agent .file-preview-wrapper-image .file-preview .file-preview-overlay {...}

and for remove grid :

.vue-file-agent .file-preview .file-preview-img {...}

But how can I remove setting "average" color background ?

In source code i found function :

public color(): string {
    if (this.imageColor) {
      const rgb = this.imageColor;
      return 'rgb(' + rgb[0] + ', ' + rgb[1] + ', ' + rgb[2] + ')';
    }
    if (this.isImage()) {
      return 'transparent';
    }
    const ext = this.ext();
    const svgIcon = this.icon();
    // var svgIcon = getIconFromExt(ext);
    if (svgIcon.color) {
      return svgIcon.color;
    }
    return utils.getColorForText(ext);
  }

And property imageColor :

imageColor: RGBA;

[safrazik]

I think, having a property to disable this feature will be the ideal solution for this. But for the time being, you can use a CSS workaround. Note the usage of !important

.vue-file-agent .file-category-video-playable .file-preview,
.vue-file-agent .file-preview-wrapper-image .file-preview {
  background: transparent !important;
}

[lelikflegma]

Yes it works like that, thanks. But having property will be better.

[safrazik]

Yes, with the property, the operation to calculate the average color can be avoided too.

Instead of transparent background you can try other colors like white and black too.