引子
课堂上,有同学提出 URL 图片问题:AngularJS 访问后台数据库中的图片URL,这是经常用到的。 但有时会莫名其妙地报错: 报错%7B%7B picture%7D%7D。
碰上这类错误, 通常的第一反应是,图片的URL 本身有错,经仔细排查,发现图片的URL 可以在浏览器正常显示。 再说了。 图片的URL中明明没有 %7B ,这个特殊的符号是从哪里来的呢?
再来分析这行代码: %7B%7B goods.picture%7D%7D
,它是什么意思呢?原理 %7B%7B
是{{
, 而%7D%7D
是}}
。
再来看对应的代码, 浏览器要加载的图片是:
<img src= {{goods.picture}} >
问题来了, AngularJS并没有很好地解析这个表达式,而是错误地把它改成了:
<img src= %7B%7B{{goods.picture}}%7D%7D >
经过这个解析之后,浏览器要获取到图片地址(URL)是:
http://localhost:8080/%7B%7Bgoods.picture%7D%7D
这个图片的URL 肯定是不存在的。 这说明,这种代码写法是有问题的。 怎么办? 给出解决方案, 使用ng-src
,如下:
<img ng-src= "{{goods.picture}}" >
小结
这样一来, AngularJS 就可以正常解析图片的URL了。 正常的顺序是: AngularJS 先解析图片的URL,在把解析过的URL传给浏览器,浏览器再向服务器发送 图片URL 请求。