AnguarJS 获取图片，报错%7B%7B picture%7D%7D ？

引子

课堂上，有同学提出 URL 图片问题：AngularJS 访问后台数据库中的图片URL，这是经常用到的。 但有时会莫名其妙地报错： 报错%7B%7B picture%7D%7D。

AngularJS获取图片URL 报错.jpg

碰上这类错误， 通常的第一反应是，图片的URL 本身有错，经仔细排查，发现图片的URL 可以在浏览器正常显示。 再说了。 图片的URL中明明没有 %7B ,这个特殊的符号是从哪里来的呢？

---

再来分析这行代码： %7B%7B goods.picture%7D%7D ，它是什么意思呢？原理 %7B%7B 是{{ , 而%7D%7D是}}。

再来看对应的代码， 浏览器要加载的图片是：

问题来了， AngularJS并没有很好地解析这个表达式，而是错误地把它改成了：

经过这个解析之后，浏览器要获取到图片地址（URL）是：

http://localhost:8080/%7B%7Bgoods.picture%7D%7D

这个图片的URL 肯定是不存在的。 这说明，这种代码写法是有问题的。 怎么办？ 给出解决方案， 使用ng-src，如下：

小结

这样一来， AngularJS 就可以正常解析图片的URL了。 正常的顺序是： AngularJS 先解析图片的URL，在把解析过的URL传给浏览器，浏览器再向服务器发送 图片URL 请求。

---

参考书： 《 全栈开发之道：MongoDB+Express+AngularJS+Node.js 》