AnsweredAssumed Answered

Popup media image not showing

Question asked by alterwiel on Oct 15, 2018

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

Outcomes