angularng-style

Why is ngStyle background-image not loading?


I'm having trouble getting my image to display. It was displaying before. In my containers/introduction template I have:

<div mat-card-image class="quiz-topic-image"
      [ngStyle]="{ 'background': 'url(' + quizData?.imageUrl + ') no-repeat center center',
                   'background-size': '95%' }">
    </div>

and in my quiz.ts file I have imageUrl: 'DIDiagram.png',

and the image is in assets/images/DIDiagram.png

I've tried changing the path to the image, but nothing seems to work. Please can you help. Thank you.


Solution

  • write background(no-repeat and center center are for background property) rather than background-image

     imageUrl: './../assets/images/DIDiagram.png'
    
    <div mat-card-image class="quiz-topic-image"
          [ngStyle]="{ 'background': 'url(&quot;' + quizData?.imageUrl + '&quot;) no-repeat center center',
                       'background-size': '95%' }">
        </div>