title: Angular: how to programmatically set Base64 image as background image of a div
body: <p>I have a <code>div</code> in which I show a Base64 image using CSS:</p>
  
  <pre><code>.my-image {
      background: url('data:image/jpg;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
  }
  </code></pre>
  
  <p>Now this image could be different because I retrieve it from back-end so I have to change it dinamically.</p>
  
  <p>So I have removed CSS and I have tried some solution in the component such as the following:</p>
  
  <pre><code>&lt;div [style.background]="'url(' + myImage + ')'"&gt;&lt;/div&gt;
  
  &lt;div [ngStyle]="{'background-image':'url('+ myImage +')'}"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and some others... but none worked.</p>
  
  <p>I have also sanitized the image in the component, using some methods of <code>DomSanitizer</code> like this:</p>
  
  <pre><code>this.sanitizer.bypassSecurityTrustResourceUrl(this.myImage)
  </code></pre>
  
  <p>But even this doesn't do the trick :(</p>
  
  <p>Do you know a working way to have <code>div</code> with dynamic background image?</p>
  
  <p>Here is my CSS now:</p>
  
  <pre><code>div {
    width: 3em;
    height: 3em;
  }
  </code></pre>