ArcGIS JS API in PopupTemplate abnormal function module Load picture

Problem Description

When the back-end interface to get a picture url address, then demand is to render this image in pop PopupTemplate panel ArcGIS JS API provided, allowing users to click on a location on the map, you can pop pop detailed information in this pop in among them to get back from this image, this effect is similar to the following:

 

In fact, the above effect is achieved, then it is very simple, we only need to pass the appropriate rendering object property values ​​when instantiating pop on it, as shown below:

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>"
});

As shown in the above code, we want to increase the image pop requiring only the addition <img> tag in the content can be inside, to thereby specify the attribute img url tag can be added to complete the operation of the picture window in the bomb, but it did not we got the picture is not properly address the address of the picture, which is our address with braces, like this below:

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

This combination addresses the img tag problem occurs after incoming content attributes, because in PopupTemplate inside braces {} that follows the template syntax is for ES6, so it will be our Content braces inside the picture address as template syntax parsing, eventually we'll get an empty address parsed as follows:

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

Since that addresses are resolved in such a way, we pop pictures certainly can not properly loaded, as follows:

 

 

Solution

Now that we have found the cause of the problem is due to the parsing template syntax errors caused, then we can make the appropriate next solution.

method one:

Template syntax error parsing the braces, so that led to the wrong address picture, then we add the backslash escape character in front of the parentheses to spend operation can ah, this form is similar to the following:

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

But the actual operation of the method does not find this.

Method Two:

Using the encodeURI () method of encoding an entire picture of address, as follows:

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

After testing, this approach is feasible. As for the specific application of these methods encodeURI (), please find their own network resources to learn.