img的src地址带空格或者特殊字符加载不出来

html img的src地址地址带空格或者特殊字符加载不出来

或者

new Image的src地址带空格或者特殊字符加载不出来

1、原因

这个是因为使用URL取图片地址，地址中带有空格或者一些特殊字符是读不到图片的，需要把地址中的空格改为%20。

这是因为url编码的表示方式，对于每个字节，是用%后面跟ASCII码的两位十六进制值表示；

根据URL的编码：空格的是%20.

URL的合法字符，在浏览器的地址栏中不会也不需要被转义的字符，有两种：

URL元字符：分号（;），逗号（’,’），斜杠（/），问号（?），冒号（:），at（@），&，等号（=），加号（+），美元符号（$）

语义字符：a-z，A-Z，0-9，连词号（-），下划线（_），点（.），感叹号（!），波浪线（~），星号（*），单引号（），圆括号（()`）

2、JavaScript的四个URL编码/解码方法：

encodeURI

将元字符和语义字符之外的字符都进行转义，一般用于知道该URL只用于完整的URL时使用

encodeURIComponent

将除了语义字符之外的字符进行转义，包括元字符，因此，它的参数通常是URL的路径或参数值，而不是整个URL。

比如说，要在谷歌中搜索www.baidu.com/q=5&name时，若使用encodeURI，&字符并不会被转义，从而改变其真正的URL。

3、处理代码

function encodePath(path) {

    path = encodeURI(path).replace(/\#/g, '%23');

    path = path.replace(/\?/g, '%3F');

    return path;

}

* 需要特殊处理 #号 与 ?号。