CODEWITHSUNDEEP
angularng-style
integral100x
integral100x

Reputation: 342

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.

Upvotes: 0

Views: 1270

Answers (1)

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17570

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>

Upvotes: 1

Related Questions