I'm trying to display a default image when the other specified in src doesn't exists, so I did:

<img src=".././uploads/images/avatar/' + user.id + '.png" onerror="this.src='+"assets/img/default-avatar.png"+'"></div>';

the problem is that I still get the broken thumbnail. Strange thing is that: if I switch the src, so I place assets/img/default-avatar.png in the src all works well, any idea?

I'm trying to display a default image when the other specified in src doesn't exists, so I did:

<img src=".././uploads/images/avatar/' + user.id + '.png" onerror="this.src='+"assets/img/default-avatar.png"+'"></div>';

the problem is that I still get the broken thumbnail. Strange thing is that: if I switch the src, so I place assets/img/default-avatar.png in the src all works well, any idea?

• javascript
• html

• 1 what these + sign means? – Maheer Ali Commented Feb 12, 2019 at 12:02
• 1 @MaheerAli concatenate the string path – sfarzoso Commented Feb 12, 2019 at 12:02
• Are you writing this in a JS file? – Nick Parsons Commented Feb 12, 2019 at 12:03
• @NickParsons yes, I need to concatenate it because it start with ' – sfarzoso Commented Feb 12, 2019 at 12:04

2 Answers 2

Make sure that quotes matching:

'<img src=".././uploads/images/avatar/' + user.id + '.png" onerror="this.src='+"assets/img/default-avatar.png"+'"></div>';

Or, more readable, use the power of template strings:

`<img src=".././uploads/images/avatar/${user.id}.png" onerror="this.src='${"assets/img/default-avatar.png"}'"></div>`;

Put like this,

onerror="javascript:this.src='/assets/img/default-avatar.png'"

OR

onerror="this.src='/assets/img/default-avatar.png'"