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()這類方法的具體應用，請自行查找網絡資源來學習。