How to show a picture from a url in a field for each feature

MattTenold2 — Tue, 10 Jan 2017 23:24:42 GMT

Hello all,

I am having issues showing a picture from a url in a field. I am trying to show the image when a user clicks on the feature and the infowindow opens. I can get a link to show up on the infowindow and then if I click on the link the image opens. I want the picture to open without clicking on the link in the infowindow. It seems easy when you type the url to the image but when the url is dynamic based on which feature the user clicks it only brings up the hyperlink to the image.

<!DOCTYPE html>

<html>

<head>

<title>Get started with popups - 4.2</title>

<style>

html,

body,

#viewDiv {

padding: 0;

margin: 0;

height: 100%;

width: 100%;

}

#instruction {

z-index: 99;

position: absolute;

top: 15px;

left: 50%;

padding: 5px;

margin-left: -175px;

height: 20px;

width: 350px;

background: rgba(25, 25, 25, 0.8);

color: white;

}

</style>

require([

"esri/tasks/Locator",

"esri/Map",

"esri/views/MapView",

"esri/layers/FeatureLayer",

"dojo/domReady!"

], function(

Locator,

Map,

MapView,

FeatureLayer

) {

// Create the Map

var map = new Map({

basemap: "streets-navigation-vector"

});

// Create the MapView

var view = new MapView({

container: "viewDiv",

map: map,

center: [-122.30, 47.83],

zoom: 12

});

var template = {

title: "Lynnwood Traffic Camera",

content: [{

type: "fields",

fieldInfos: [{

fieldName: "html"

}]

//content: "Traffic View: {html}"

};

// City of Lynnwood Traffic Cameras.

var featureLayer = new FeatureLayer({

url: "http://services2.arcgis.com/W2b0jYHWnOivta60/arcgis/rest/services/lynnwood_traffic_cameras/FeatureServer/0",

outFields: ["*"],

popupTemplate: template

});

map.add(featureLayer);

/*******************************************************************

* This click event sets generic content on the popup not tied to

* a layer, graphic, or popupTemplate. The location of the point is

* used as input to a reverse geocode method and the resulting

* address is printed to the popup content.

*******************************************************************/

});

</script>

</head>

<body>

</body>

</html>

Re: How to show a picture from a url in a field for each feature

FC_Basson — Wed, 11 Jan 2017 06:39:42 GMT

In your popup template content you need to make the html field value part of a valid HTML img element and not just echo the html field value e.g.

<img src="{html}" alt="">‍

Also have a look at the media options for popups: PopupTemplate | API Reference | ArcGIS API for JavaScript 4.2

topic Re: How to show a picture from a url in a field for each feature in ArcGIS JavaScript Maps SDK Questions

How to show a picture from a url in a field for each feature

Re: How to show a picture from a url in a field for each feature