[ngStyle]="{'background': '#fff url(' not working

[doctordldh]

🐞 bug report

Affected Package

Angular 10

Is this a regression?

Angular 8, 9 is working

Description

Hi, I update to angular 10 and the below code is no longer working.

                                        <div #contentToConvert id="contentToConvert"
                                            style="background-size: contain;"
                                            [ngStyle]="{'background': '#fff url(' + imgURL + ') no-repeat 0 0'}">
                                        </div>

i downgraded to angular 9 and it working again. i tested this in 2 different machine and confirm this is a problem.

[muuvmuuv]

Have you tried [style] or [attr.style]?

[mlc-mlapis]

@doctordldh For me, it works. Angular 10.0.2.

[doctordldh]

i tried, but still facing the same problem....

my package.json is below

"dependencies": { "@agm/core": "1.1.0", "@angular/animations": "10.0.2", "@angular/cdk": "10.0.1", "@angular/common": "10.0.2", "@angular/compiler": "10.0.2", "@angular/core": "10.0.2", "@angular/flex-layout": "10.0.0-beta.32", "@angular/forms": "10.0.2", "@angular/http": "7.2.16", "@angular/localize": "10.0.2", "@angular/material": "10.0.1", "@angular/material-moment-adapter": "10.0.1", "@angular/platform-browser": "10.0.2", "@angular/platform-browser-dynamic": "10.0.2", "@angular/router": "10.0.2", "@angular/youtube-player": "10.0.1", "@aspnet/signalr": "1.1.4", "@devexpress/analytics-core": "20.1.4", "@ngrx/effects": "9.2.0", "@ngrx/router-store": "9.2.0", "@ngrx/store": "9.2.0", "@ngrx/store-devtools": "9.2.0", "@ngx-translate/core": "13.0.0", "@ngx-translate/http-loader": "6.0.0", "@swimlane/ngx-datatable": "17.0.0", "@types/prismjs": "1.16.1", "angular-in-memory-web-api": "0.11.0", "angular-mentions": "1.2.0", "angular2-signaturepad": "2.11.0", "classlist.js": "1.1.20150312", "devexpress-reporting-angular": "20.1.4", "devextreme": "20.1.4", "devextreme-angular": "20.1.4", "file-saver": "2.0.2", "guid-typescript": "1.0.9", "hammerjs": "2.0.8", "html2canvas": "1.0.0-rc.5", "jquery-ui": "1.12.1", "jwt-decode": "2.2.0", "lodash": "4.17.15", "moment": "2.27.0", "ng-keyboard-shortcuts": "9.0.1", "ngx-auto-unsubscribe": "3.0.1", "ngx-color-picker": "9.1.0", "ngx-cookie-service": "3.0.4", "ngx-json-viewer": "2.4.0", "ngx-webcam": "0.3.0", "npm-check-updates": "7.0.1", "perfect-scrollbar": "1.5.0", "prismjs": "1.20.0", "quagga": "0.12.1", "rxjs": "6.6.0", "stream": "0.0.2", "web-animations-js": "2.3.2", "webrtc-adapter": "7.6.3", "zone.js": "0.10.3" }, "devDependencies": { "@angular-devkit/build-angular": "0.1000.1", "@angular/cli": "10.0.1", "@angular/compiler-cli": "10.0.2", "@angular/language-service": "10.0.2", "@angularclass/hmr": "2.1.3", "@types/jasmine": "3.5.11", "@types/jasminewd2": "2.0.8", "@types/jwt-decode": "2.2.1", "@types/lodash": "4.14.157", "@types/node": "14.0.18", "codelyzer": "6.0.0", "jasmine-core": "3.5.0", "jasmine-spec-reporter": "5.0.2", "karma": "5.1.0", "karma-chrome-launcher": "3.1.0", "karma-coverage-istanbul-reporter": "3.0.3", "karma-jasmine": "3.3.1", "karma-jasmine-html-reporter": "1.5.4", "protractor": "7.0.0", "ts-node": "8.10.2", "tslib": "2.0.0", "tslint": "6.1.2", "typescript": "3.9.6", "webpack-bundle-analyzer": "3.8.0" }

[mlc-mlapis]

@doctordldh Can you demonstrate it on Stackblitz?

[pkozlowski-opensource]

@doctordldh I don't think it is related to Angular at all but more to the fact that the empty <div> will not show the background image - unless you specify its dimensions: https://stackblitz.com/edit/angular-rrudqm?file=src/app/app.module.ts

In any case this is more of the HTML / CSS question as Angular generates the correct markup. Closing as a support request (still, happy to investigate more if you can demonstrate that the same used to work in previous versions of Angular!)

[doctordldh]

i discovered the problem... when the the based64 string is loaded, somehow the ';' was removed.

ngcontent-jow-c680="" id="contentToConvert" style="background: url("data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAA

become

ngcontent-jow-c680="" id="contentToConvert" style="background: url("data:image/jpegbase64,/9j/4QAYRXhpZgAASUkqAA

i have no idea why it happen like that, my solution is to put a double ;; in between and it work now.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}