Build Your own function - complex parameter msgType Images not showing up

MDN Learn
1

Hello

I am working my way through the MDN JS tutorials and am stuck just before the test your skills part.
The problem I want to solve is connected to the images not showing up in the message box.

Correct

obraz
obraz323×154 3.07 KB

Wrong

obraz
obraz525×265 1.73 KB

GitHub works fine:
GitHub - Live
GitHub - Code

My version doesn’t - colors are changing depending on the type of parameter, so that part works. I have tried solving the problem with relative path and to no avail.

      if (msgType === 'warning') {
      msg.style.backgroundImage = 'url(icons/warning.png)';
      panel.style.backgroundColor = 'red';
    } else if ( msgType === 'chat') {
      msg.style.backgroundImage = 'url(icons/chat.png)';
      panel.style.backgroundColor = 'aqua';
    } else {
      msg.style.paddingLeft = '20px';
    }

What I did find though is this

obraz
obraz500×136 5.17 KB

The

inline style has the background-image value set with double, double quotes.
Is this the source of the problem ?

2

Hello @H4m4k

is this the topic you talking about

could you share the full code in any of the online sharing service like codepen or jsfiddle or anything else

and have a nice day :slight_smile:

3

Hello @justsomeone

yes that is the exact topic I had in mind.

and a nice day for You too :slight_smile:

4

Hello @H4m4k

you need to put the image file in your project if you inspect the result panel

you would see it can not load the image

and from this screen shoot i only see the html file in your project

Screenshot from 2020-10-16 01-21-19
Screenshot from 2020-10-16 01-21-19282×314 3.51 KB

the full path to the image is

https://mdn.github.io/learning-area/javascript/building-blocks/functions/icons/chat.png

so change this

      msg.style.backgroundImage = 'url(icons/warning.png)';

to this

      msg.style.backgroundImage = 'url(https://mdn.github.io/learning-area/javascript/building-blocks/functions/icons/chat.png)';

hope that help and have a nice day