Question

请考虑此代码。单个反斜杠在img标签中有效，而在button标签中无效：

<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>

当我单击按钮时，什么也没有发生。图像不变。

现在，如果我在按钮标签中将反斜杠更改为正斜杠，那就可以了！

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

无法找出问题所在。

有任何线索吗？

Answer 1

反斜杠是转义字符，因此在反斜杠后加上的任何内容都会有不同的解释。

为此，请添加一个额外的反斜杠，以避开您打算在地址中放入的反斜杠，例如，将单反斜杠\替换为双反斜杠\\，它应该可以正常工作。 / p>

Answer 2

onclick属性的值为JavaScript。在JavaScript中，\是转义字符，要表达文字\，您需要对其进行转义（即\\）。

由于您没有这样做，所以最终得到的字符串是： C：UsersooPicturesCamera Rollpic2.jpg

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

src属性的值不是JavaScript。 \不是纯HTML中的转义字符。

您可以使用\来代替/，因为：

URL使用/作为路径分隔符
Windows使用\作为路径分隔符
Web浏览器在处理Windows路径时仍使用URL处理代码，因此可以或多或少地互换使用。

html中正斜杠和斜杠的怪异行为

2 个答案: