解决因带有空格和特殊字符的img src地址导致的图片渲染问题

开发中，经常会遇到HTML中图片加载失败或JavaScript中new Image的src地址加载异常的情况。这往往是由于URL中包含空格或其他特殊字符而引起的问题。

1. 问题根源

当我们使用URL作为图片地址时，其中包含空格或一些特殊字符时，浏览器可能无法正确读取图片。这是因为URL中的特殊字符需要进行正确的编码，以确保其在网络传输过程中不会引起歧义。URL编码采用对每个字节使用%后面跟ASCII码的两位十六进制值表示的方式，其中空格的编码为%20。

需要注意的是，URL中有一些字符是合法且不需要被转义的，如:

URL元字符：分号（;），逗号（’,’），斜杠（/），问号（?），冒号（:），at（@），&，等号（=），加号（+），美元符号（$）
语义字符：a-z，A-Z，0-9，连词号（-），下划线（_），点（.），感叹号（!），波浪线（~），星号（*），单引号（），圆括号（()`）

<!-- 包含空格的图片路径 -->
<img src="path with spaces/image.jpg" alt="空格"