Search code examples
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>