weird behavior of forward and backward slashes in html

Question

consider this code please. A single backslash worked in img tag but not in button tag:

<body>
    <h4>This is Me.</h4>
    <img src='C:\Users\foo\Pictures\Camera Roll\pic1.jpg' height="100px" width="100px" id="myImage">
    <button onclick='document.getElementById("myImage").src="C:\Users\foo\Pictures\Camera Roll\pic2.jpg"'>This is you</button>

</body>

When I click on the button, nothing happens. image doesn't change.

Now if I change the backward slash with forward slash in button tag, it works!

<button onclick='document.getElementById("myImage").src="C:/Users/foo/Pictures/Camera Roll/pic2.jpg"'>This is you</button>

Not able to figure out whats wrong with it.

any clue?

Possible duplicate of [So what IS the right direction of the path's slash (/ or \‌) under Windows?](https://stackoverflow.com/questions/1589930/so-what-is-the-right-direction-of-the-paths-slash-or-under-windows) — Jon P, Aug 14 '18 at 04:20
@Quentin No, It's not JavaScript. It's HTML and should JQuery for this. — Ali Vojdanian, Aug 14 '18 at 06:41
To answer your question I will have to ask a question what does the single quote do in the img tag that should tell you that attention to detail is important — Andrey Kaplun, Aug 14 '18 at 06:56
@AndreyKaplun — The problem is in the value of the `onclick` attribute, which is JavaScript. There's no point in involving jQuery in this, it doesn't make anything easier. — Quentin, Aug 14 '18 at 08:28

score 2 · Answer 1 · answered Aug 14 '18 at 04:20

2

Backslash is an escape character, so whatever you put after a backslash is interpreted differently.

To account for this, put an extra backslash to escape the backslash that you intend to put in the address, i.e replace the single backslash \ with double backslashes \\ and it should work fine.

answered Aug 14 '18 at 04:20

Akash Srivastav

756
5
15

why a single backslash worked in img tag but not in button tag? – KawaiKx Aug 14 '18 at 06:29
1

@KawaiKx In the img tag you've used single quotes ' ', so it is read as a static string with \ as is. In the button tag, you've used backticks ` `, where the \ is read as the escape character and not the \, as variable values and other things are substituted when you use backticks. Please correct me if I am wrong. – Akash Srivastav Aug 14 '18 at 06:51
@AkashSrivastav — There are no backticks in the question at all. – Quentin Aug 14 '18 at 08:33

score 2 · Accepted Answer · answered Aug 14 '18 at 08:33

The value of the onclick attribute is JavaScript. In JavaScript, \ is an escape character and to express a literal \ you need to escape it (i.e. \\).

Since you didn't, the string you end up with is: C:UsersooPicturesCamera Rollpic2.jpg

console.log("C:\Users\foo\Pictures\Camera Roll\pic2.jpg");

The value of the src attribute is not JavaScript. \ is not an escape character in plain HTML.

Instead of escaping your \ you can replace it with / because:

URLs use / as a path separator
Windows uses \ as a path separator
Web browsers, when dealing with Windows paths, still use URL handling code, so can use either more-or-less interchangeably.

weird behavior of forward and backward slashes in html

2 Answers2