Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug] Missing background styling after dynamically updating the 'src' property

See original GitHub issue

On initial rendering, the avatar property adds the following CSS when the ‘src’ property is set:

background: url("src_path") 0% 0% / 100px 100px no-repeat content-box;

However, if the ‘src’ property is bound to a computed element, which then gets updated after the initial rendering of the avatar element, the CSS background property gets updated to:

background: url("src_path");

Missing 0% 0% / 100px 100px no-repeat content-box; and causing the image to be displayed incorrectly.

Issue Analytics

State:
Created 6 years ago
Comments:6

Top GitHub Comments

1reaction

rmartins90commented, Jul 11, 2017

It’s fixed by this https://github.com/eliep/vue-avatar/pull/9

0reactions

jerrebmcommented, Jul 13, 2017

Seems like it

Top Results From Across the Web

Backgroundimage is not working in react - Stack Overflow

I am new to react and trying to get background image with inline styling. But it's not working. Showing ...

Handling common HTML and CSS problems - MDN Web Docs

After the packages have finished installing, try loading up an HTML file and a CSS file: you'll see any issues highlighted with green...

How to Create CSS Custom Properties That Dynamically ...

Read How to Create CSS Custom Properties That Dynamically Update with React & JavaScript at Space Jelly.

Preventing Content Reflow From Lazy-Loaded Images

Reflow is a problem because it's a user-blocking operation. It slows down the browser by forcing it to recalculate the layout of any...

HTML DOM Style backgroundImage Property - W3Schools

The backgroundImage property sets or returns the background image of an element. ... HTML Styles: The background Property ... none, No background image....