background image not showing in Angular

angular background image
angular fullscreen background image
angular 6 set background image dynamically
angular image not showing
background-image error in angular
how to add background image in angular component
angular 7 scss background-image url
angular 6 background image css

Yes, I did search and found many examples, but none worked for me. I am not sure what am I doing wrong. Need help!

I can see the image if I put in <img> tag, but not when I put as background-image. But I can see the binary image when I do inspect element.

Tried doing an example in stackblitz https://stackblitz.com/edit/display-image-from-rest-api-qpnspq?embed=1&file=src/app/app.component.ts

HTML:

 <!-- This works -->
 <div class="row" style="max-width: 100%; margin-left: 1px;" >
     <img id="dashboardImage" [src]='imageBlobDataUrl' height='500' width='500' />
 </div>

 <!-- This does NOT works -->
<div class="row" style="max-width: 100%; margin-left: 1px;" [style.background-image]="image"> </div>

TS:

    @Input() imageBlobDataUrl: any;
    selectedImage: QiImage = new QiImage();

    public header:SafeHtml;
    public content:SafeHtml[];
    public image:SafeStyle;

  constructor(
          private qiImageService: QiImageService,
          private sanitizer: DomSanitizer,
          private imageService: ImageService
  ) {}
  populateImageDetails(lineId, bitmapFileName) {
      this.imageService
          .populateImageDetails(lineId, bitmapFileName)
              .subscribe( (selectedImage : any) => {
                  this.selectedImage = selectedImage;
                  //let TYPED_ARRAY = new Uint8Array(selectedImage.imageData);
                  //const STRING_CHAR = String.fromCharCode.apply(null, TYPED_ARRAY);
                  //let base64String = btoa(STRING_CHAR);
                  let objectURL = 'data:image/png;base64,' + selectedImage.imageData;
                  this.imageBlobDataUrl = this.sanitizer.bypassSecurityTrustUrl(objectURL);
                  this.image = this.sanitizer.bypassSecurityTrustStyle(`url(${objectURL})`);
              });
  }


It works fine when i tried your stackblitz . You need to Fix CSS to get the image displayed on view.

Do not use bypassSecurityTrustUrl for Style Url. So the below for thumbnail is not valid:

this.thumbnail = this.sanitizer.bypassSecurityTrustUrl(objectURL); // Do NOT Use

this.image = this.sanitizer.bypassSecurityTrustStyle(`url(${objectURL})`); // This works fine and is Valid

Try to adjust the CSS position for your image and it will show up:

<div class="row" 
  style="width: 100%; height: 100%; position:absolute; 
  margin-left: 1px;  background-repeat: no-repeat;" 
  [style.background-image]="image"> </div>

background image not showing in Angular, background image not showing in Angular. 521. October 09, 2019, at 05:50 AM. Yes, I did search and found many examples, but none worked for me. I am not  I can’t figure out why this background image does not show up. But when I using content:url() it showing up. The problem using content:url(), I can’t control image size. Bellow I provid…


You can just put the URL image on src even if it's on base64

 <img id="dashboardImage" [src]='objectURL' height='500' width='500' />

image not showing from local floder for my background, Toggle light/dark theme. Toggle Zen Mode. Project. Download Project. Info. Starter project for Angular apps that exports to the Angular CLI. 2.6k. 5. Files. src. @smatthews1999 Try increasing the dimensions of the image in paint. I had an image in the path src/assets/Library/Images with dimensions 60 x 45 which did not load and an image with dimensions 225 x 225 which loaded successfully. Hope this helps !


if you try to set the background image using CSS ? like this:

.bg {
  background-image: url("../../yourimage");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;

}

In the template you can use the binding to set the css class as you like

dynamic-background-image-not-working-angular-5, I tried both ways thinking the path was wrong, but neither of them display the images. martinbelev January 20, 2019, 8:48pm  Angular Bootstrap Background Image Angular Background Image - Bootstrap 4 & Material Design. Angular Bootstrap background image is an illustration chosen by a user placed behind all other objects on the website. It may be full or partially visible.


CSS Background-Image Not Working - HTML-CSS, The image does not appear in the background. (Browser: Brave/​FirefoxDevEdition) header { background-image:  @atkins.chrisw said in Angular Background Image:. Sorry Jared, how would I make the date/pickers have a white color instead of the black? Sorry for the extremely delayed response but you can easily change this by creating a "dark" theme and applying it to the section of the page you want inverted colors on.


CSS background-image doesn't work - HTML-CSS, @angular/cli: 1.0.0-beta.32.3 node: 6.9.3 os: linux x64 results in the image being in the right place within the dist folder, so it is not just some  If your image url is a known value as you seem to be indicating here, there's no need for any special angular property binding. Simply specify your image tag using normal HTML: <img alt="logo" src="images/logo.png">. Note that the path above is a relative path. share. Share a link to this answer.


Unable to load background image since beta 32 · Issue #4842 , The background-image CSS property sets one or more background images on an element. Note: Even if the images are opaque and the color won't be displayed in normal <angular-color-hint> = <angle-percentage> Browsers do not provide any special information on background images to assistive  Adding an Image/Logo in Angular. The assets folder that the Angular CLI generated for us is the perfect place to use for storing images. Let's go grab the Angular