Why is ngStyle background-image not loading?

Question

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.

are u taking any error in console? – mr. pc_coder May 10 '20 at 23:46 — mr. pc_coder, May 10 '20 at 23:46

mr. pc_coder · Accepted Answer · 2020-05-11T01:23:14.133

1

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>

edited May 11 '20 at 01:23

answered May 10 '20 at 23:47

mr. pc_coder

16,412
3
32
54

yes I've changed it to background, but still not displaying... now i'm getting in Chrome: Failed to load resource: the server responded with a status of 404 (Not Found) – integral100x May 10 '20 at 23:56
Can u check now if image is written in its style with correct name of image from console.log ? – mr. pc_coder May 11 '20 at 00:01
this is what I get when I inspect the element:
– integral100x May 11 '20 at 00:03
Can your try edited answer again problem could be " – mr. pc_coder May 11 '20 at 00:08
U should write also assets path in frond of your url – mr. pc_coder May 11 '20 at 00:14
I tried imageUrl: '../assets/images/DIDiagram.png', still not working – integral100x May 11 '20 at 00:18
You need at least two up ../../assets. First .. is app level, second .. is src level then u can go to assets – mr. pc_coder May 11 '20 at 00:23
My assets folder (which contains quiz.ts) is on the same level as containers. – integral100x May 11 '20 at 00:27
I tried the imageUrl that you specified above but it's still not working. – integral100x May 11 '20 at 00:35
Okay, moved my assets into the assets folder in src and all is good now, thanks!! – integral100x May 11 '20 at 01:54

Why is ngStyle background-image not loading?

1 Answers1