ArcGIS JS API中的PopupTemplate功能模块中加载图片异常

问题描述

从后端接口拿到一个图片的url地址，然后需求是将这个图片渲染到ArcGIS JS API提供的PopupTemplate弹窗面板中，让用户点击地图上的某个位置时，可以弹窗详细的信息弹窗，在这个弹窗中其中就有从后台拿到的这个图片，类似于下面这种效果：

 

上述效果其实实现起来的话很简单，只需要我们在实例化弹窗的时候传入相应的渲染对象属性值就可以了，如下所示：

var test = new PopupTemplate({
	title: "{name}",
	location: 'top-right',
	content:
		"<img src='" + imgurl + "' style='width: 100%; height: 250px' />" +
		"<p style='margin-top: 20px'><b>分辨率：</b>{resolution}</p>" +
		"<p><b>波段：</b>{tag}</p>" +
		"<p><b>时间：</b>{acquisitiondate:DateFormat}</p>" +
		"<p><b>年份：</b>{year}</p>" +
		"<p><b>云量覆盖：</b>{cloudcover}</p>"
});

如上述代码所示，我们要想在弹窗中增加图片，只需要在content里面添加<img>标签就可以，从而给img标签指定url属性就可以完成在弹窗中添加图片的操作，但事与愿违，我们拿到的图片地址并不是正常的图片地址，我们的地址里面是带有花括号的，类似于下面这种：

"http://10.10.10.111:8080/quickview/{33665132-754A-4180-842E-62FF292EA4C5}/{30023F9E-6362-11EA-881C-000C291A4B7F}.jpg"

这种地址结合img标签传入content属性后会出现问题，因为在PopupTemplate里面，{}这种花括号是沿用了ES6的模板语法的，所以它会将我们Content里面的图片地址中的花括号当做模板语法来进行解析，最终我们会得到解析后的一个空地址，如下：

"http://10.10.10.111:8080/quickview//.jpg"

那既然地址都被解析成这样了，我们弹窗中的图片肯定不能正常加载了，如下：

 

 

解决方法

既然问题原因我们已经找到了，就是由于模板语法的错误解析造成的，那我们接下来就可以进行相应的解决。

方法一：

模板语法错误解析了花括号，所以才导致图片地址错误，那我们在花括号前面添加反斜杠的转义字符来操作就可以啊，类似于下面这种形式：

"http://10.10.10.111:8080/quickview/\{33665132-754A-4180-842E-62FF292EA4C5\}/\{30023F9E-6362-11EA-881C-000C291A4B7F\}.jpg"

但是实际操作后发现这种方法不行。

方法二：

使用encodeURI()方法对整个图片的地址进行编码，代码如下：

var imageurl = "http://10.10.10.111:8080/quickview/{33665132-754A-4180-842E-62FF292EA4C5}/{30023F9E-6362-11EA-881C-000C291A4B7F}.jpg";
var imgurl = encodeURI(imageurl);

经检测，这种方法是可行的。至于encodeURI()这类方法的具体应用，请自行查找网络资源来学习。