I'm using ArcGIS JS 4.6.
I can't get images to display in my popups on mobile devices when using Chrome, neither iOS or Android Chrome browsers will work. Safari on iOS works fine.
When I inspect the DOM while running the webpage in the Chrome device emulator as iPhone 6/7/8 I see the attributes of the img tag as this:
But doing this for Galaxy S5 gives this:
Notice the size here is 0 x 0 pixels, but the one that is working properly is 180 x 135 pixels.
This is my code for the popup template content property
function getPlayGroundPopupContent(feature) {
var retVal = [];
var assetId = feature.graphic.attributes.assetId;
_siteImage = "https://.../maps/playgrounds/images/" + assetId + ".jpg";
var text;
text = {
type: "text",
text: "<span class='playgrounds-expression-toilet'>{expression/toilet}</span></br>{playEquip}"
};
var media = {
type: "media",
mediaInfos: [{
type: "image",
value: {
sourceURL: "https://.../maps/playgrounds/images/" + assetId + ".jpg"
}
}]
};
retVal.push(text);
retVal.push(media);
return retVal;
}
Updated
I've solved this problem. My stylesheet was hiding this element in a media query.
This was the css:
.esri-popup-renderer__content-element:last-child {
display: none;
}